directive
Syncs a nested FormGroup
to a DOM element.
Property | Description |
---|---|
@Input('formGroupName')name: string | number | null | Tracks the name of the |
AbstractFormGroupDirective
control: FormGroup
path: string[]
formDirective: Form | null
validator: ValidatorFn | null
asyncValidator: AsyncValidatorFn | null
ControlContainer
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
This directive can only be used with a parent FormGroupDirective
.
It accepts the string name of the nested FormGroup
to link, and looks for a FormGroup
registered with that name in the parent FormGroup
instance you passed into FormGroupDirective
.
Use nested form groups to validate a sub-group of a form separately from the rest or to group the values of certain controls into their own nested object.
The following example uses the get method to access the associated FormGroup
this.form.get('name');
The following example uses the get method to access individual controls within the group using dot syntax.
this.form.get('name.first');
FormGroup
.The following example registers a nested name FormGroup
within an existing FormGroup
, and provides methods to retrieve the nested FormGroup
and individual controls.
import {Component} from '@angular/core'; import {FormControl, FormGroup, Validators} from '@angular/forms'; @Component({ selector: 'example-app', template: ` <form [formGroup]="form" (ngSubmit)="onSubmit()"> <p *ngIf="name.invalid">Name is invalid.</p> <div formGroupName="name"> <input formControlName="first" placeholder="First name"> <input formControlName="last" placeholder="Last name"> </div> <input formControlName="email" placeholder="Email"> <button type="submit">Submit</button> </form> <button (click)="setPreset()">Set preset</button> `, }) export class NestedFormGroupComp { form = new FormGroup({ name: new FormGroup({ first: new FormControl('Nancy', Validators.minLength(2)), last: new FormControl('Drew', Validators.required) }), email: new FormControl() }); get first(): any { return this.form.get('name.first'); } get name(): any { return this.form.get('name'); } onSubmit() { console.log(this.first.value); // 'Nancy' console.log(this.name.value); // {first: 'Nancy', last: 'Drew'} console.log(this.form.value); // {name: {first: 'Nancy', last: 'Drew'}, email: ''} console.log(this.form.status); // VALID } setPreset() { this.name.setValue({first: 'Bess', last: 'Marvin'}); } }
AbstractControlDirective
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v10.angular.io/api/forms/FormGroupName