FormGroupDirective
Binds an existing FormGroup
to a DOM element.
NgModule
Selectors
[formGroup]
Properties
Property | Description |
---|---|
submitted: boolean
|
Read-only. |
directives: FormControlName[]
|
|
@Input('formGroup')
|
|
@Output()
|
|
formDirective: Form
|
Read-only. |
control: FormGroup
|
Read-only. |
path: string[]
|
Read-only. |
Inherited from ControlContainer
Inherited from AbstractControlDirective
-
abstract control: AbstractControl | null
-
value: any
-
valid: boolean | null
-
invalid: boolean | null
-
pending: boolean | null
-
disabled: boolean | null
-
enabled: boolean | null
-
errors: ValidationErrors | null
-
pristine: boolean | null
-
dirty: boolean | null
-
touched: boolean | null
-
status: string | null
-
untouched: boolean | null
-
statusChanges: Observable<any> | null
-
valueChanges: Observable<any> | null
-
path: string[] | null
Template variable references
Identifier | Usage |
---|---|
ngForm |
#myTemplateVar="ngForm" |
Description
This directive accepts an existing FormGroup
instance. It will then use this
FormGroup
instance to match any child FormControl
, FormGroup
,
and FormArray
instances to child FormControlName
, FormGroupName
,
and FormArrayName
directives.
Set value: You can set the form's initial value when instantiating the
FormGroup
, or you can set it programmatically later using the FormGroup
's
setValue or patchValue
methods.
Listen to value: If you want to listen to changes in the value of the form, you can subscribe
to the FormGroup
's valueChanges event. You can also
listen to its statusChanges event to be notified when the
validation status is re-calculated.
Furthermore, you can listen to the directive's ngSubmit
event to be notified when the user has
triggered a form submission. The ngSubmit
event will be emitted with the original form
submission event.
Example
In this example, we create form controls for first name and last name.
- import {Component} from '@angular/core';
- import {FormControl, FormGroup, Validators} from '@angular/forms';
-
- @Component({
- selector: 'example-app',
- template: `
- <form [formGroup]="form" (ngSubmit)="onSubmit()">
- <div *ngIf="first.invalid"> Name is too short. </div>
-
- <input formControlName="first" placeholder="First name">
- <input formControlName="last" placeholder="Last name">
-
- <button type="submit">Submit</button>
- </form>
- <button (click)="setValue()">Set preset value</button>
- `,
- })
- export class SimpleFormGroup {
- form = new FormGroup({
- first: new FormControl('Nancy', Validators.minLength(2)),
- last: new FormControl('Drew'),
- });
-
- get first(): any { return this.form.get('first'); }
-
- onSubmit(): void {
- console.log(this.form.value); // {first: 'Nancy', last: 'Drew'}
- }
-
- setValue() { this.form.setValue({first: 'Carson', last: 'Drew'}); }
- }
Methods
Parameters
Returns
|
Parameters
Returns |
Parameters
Returns |
Parameters
Returns
|
Parameters
Returns
|
Parameters
Returns
|
Parameters
Returns |
Parameters
Returns
|
Parameters
Returns
|
Parameters
Returns |
Parameters
Returns
|
Parameters
Returns
|
ParametersThere are no parameters. Returns
|
Parameters
Returns
|