directive
Syncs a nested FormArray
to a DOM element.
Property | Description |
---|---|
@Input('formArrayName')name: string | number | null | Tracks the name of the |
control: FormArray |
Read-Only The |
formDirective: FormGroupDirective | null |
Read-Only The top-level directive for this group if present, otherwise null. |
path: string[] |
Read-Only Returns an array that represents the path from the top-level form to this control. Each index is the string name of the control on that level. |
validator: ValidatorFn | null |
Read-Only Synchronous validator function composed of all the synchronous validators registered with this directive. |
asyncValidator: AsyncValidatorFn | null |
Read-Only Async validator function composed of all the async validators registered with this directive. |
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 is designed to be used with a parent FormGroupDirective
(selector: [formGroup]
).
It accepts the string name of the nested FormArray
you want to link, and will look for a FormArray
registered with that name in the parent FormGroup
instance you passed into FormGroupDirective
.
import {Component} from '@angular/core'; import {FormArray, FormControl, FormGroup} from '@angular/forms'; @Component({ selector: 'example-app', template: ` <form [formGroup]="form" (ngSubmit)="onSubmit()"> <div formArrayName="cities"> <div *ngFor="let city of cities.controls; index as i"> <input [formControlName]="i" placeholder="City"> </div> </div> <button>Submit</button> </form> <button (click)="addCity()">Add City</button> <button (click)="setPreset()">Set preset</button> `, }) export class NestedFormArray { form = new FormGroup({ cities: new FormArray([ new FormControl('SF'), new FormControl('NY'), ]), }); get cities(): FormArray { return this.form.get('cities') as FormArray; } addCity() { this.cities.push(new FormControl()); } onSubmit() { console.log(this.cities.value); // ['SF', 'NY'] console.log(this.form.value); // { cities: ['SF', 'NY'] } } setPreset() { this.cities.patchValue(['LA', 'MTV']); } }
AbstractControlDirective
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v10.angular.io/api/forms/FormArrayName