FormArrayName
directive
Syncs a nested FormArray
to a DOM element.
See also
- Reactive Forms Guide
AbstractControl
NgModule
-
ReactiveFormsModule
Selectors
[formArrayName]
Properties
Property | Description |
---|---|
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: FormArray
|
Read-Only
The |
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. |
null |
Read-Only Synchronous validator function composed of all the synchronous validators registered with this directive. |
null |
Read-Only Async validator function composed of all the async validators registered with this directive. |
Inherited from ControlContainer
name: string | number | null
formDirective: Form | null
path: string[] | null
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
Description
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
.
Example
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']);
}
}
Methods
ngOnInit() |
---|
A lifecycle method called when the directive's inputs are initialized. For internal use only. |
ngOnInit(): voidParametersThere are no parameters. Returns
Throws
|
ngOnDestroy() |
---|
A lifecycle method called before the directive's instance is destroyed. For internal use only. |
ngOnDestroy(): voidParametersThere are no parameters. Returns
|
Inherited from AbstractControlDirective
reset(value: any = undefined): void
hasError(errorCode: string, path?: string | (string | number)[]): boolean
getError(errorCode: string, path?: string | (string | number)[]): any
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v9.angular.io/api/forms/FormArrayName