[formArrayName] directive
Syncs a nested FormArray
to a DOM element.
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']); }
}
Interface, extends ControlContainer
name
#
@Input('formArrayName') name: string|number|null
Tracks the name of the FormArray
bound to the directive. The name corresponds
to a key in the parent FormGroup
or FormArray
.
Accepts a name as a string or a number.
The name in the form of a string is useful for individual forms,
while the numerical form allows for form arrays to be bound
to indices when iterating over arrays in a FormArray
.
control
#
get control(): FormArray
The FormArray
bound to this directive.
formDirective
#
get formDirective(): FormGroupDirective|null
The top-level directive for this group if present, otherwise null.
path
#
get path(): string[]
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
#
get validator(): ValidatorFn|null
Synchronous validator function composed of all the synchronous validators registered with this directive.
asyncValidator
#
get asyncValidator(): AsyncValidatorFn|null
Async validator function composed of all the async validators registered with this directive.