more_horiz
@angular/formscode
FormArrayName
directive
stable
Syncs a nested FormArray to a DOM element.
On this page
API
class FormArrayName extends ControlContainer implements OnInit ,OnDestroy { constructor(parent: ControlContainer, validators: (ValidatorFn | Validator)[], asyncValidators: (AsyncValidatorFn | AsyncValidator)[]); @Input('formArrayName') name: string | number | null; readonly control: FormArray<any>; readonly formDirective: AbstractFormDirective | null; readonly path: string[]; override readonly value: any; override readonly valid: boolean | null; override readonly invalid: boolean | null; override readonly pending: boolean | null; override readonly disabled: boolean | null; override readonly enabled: boolean | null; override readonly errors: ValidationErrors | null; override readonly pristine: boolean | null; override readonly dirty: boolean | null; override readonly touched: boolean | null; override readonly status: string | null; override readonly untouched: boolean | null; override readonly statusChanges: any; override readonly valueChanges: any; override readonly validator: ValidatorFn | null; override readonly asyncValidator: AsyncValidatorFn | null; override reset(value?: any): void; override hasError(errorCode: string, path?: string | (string | number)[] | undefined): boolean; override getError(errorCode: string, path?: string | (string | number)[] | undefined): any;}
name
string | number | nullTracks 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.
formDirective
AbstractFormDirective | nullThe top-level directive for this group if present, otherwise null.
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.
valid
boolean | nullReports whether the control is valid. A control is considered valid if no validation errors exist with the current value. If the control is not present, null is returned.
invalid
boolean | nullReports whether the control is invalid, meaning that an error exists in the input value. If the control is not present, null is returned.
pending
boolean | nullReports whether a control is pending, meaning that async validation is occurring and errors are not yet available for the input value. If the control is not present, null is returned.
disabled
boolean | nullReports whether the control is disabled, meaning that the control is disabled in the UI and is exempt from validation checks and excluded from aggregate values of ancestor controls. If the control is not present, null is returned.
enabled
boolean | nullReports whether the control is enabled, meaning that the control is included in ancestor calculations of validity or value. If the control is not present, null is returned.
errors
ValidationErrors | nullReports the control's validation errors. If the control is not present, null is returned.
pristine
boolean | nullReports whether the control is pristine, meaning that the user has not yet changed the value in the UI. If the control is not present, null is returned.
dirty
boolean | nullReports whether the control is dirty, meaning that the user has changed the value in the UI. If the control is not present, null is returned.
touched
boolean | nullReports whether the control is touched, meaning that the user has triggered
a blur event on it. If the control is not present, null is returned.
status
string | nullReports the validation status of the control. Possible values include: 'VALID', 'INVALID', 'DISABLED', and 'PENDING'. If the control is not present, null is returned.
untouched
boolean | nullReports whether the control is untouched, meaning that the user has not yet triggered
a blur event on it. If the control is not present, null is returned.
statusChanges
anyReturns a multicasting observable that emits a validation status whenever it is calculated for the control. If the control is not present, null is returned.
valueChanges
anyReturns a multicasting observable of value changes for the control that emits every time the value of the control changes in the UI or programmatically. If the control is not present, null is returned.
validator
ValidatorFn | nullSynchronous validator function composed of all the synchronous validators registered with this directive.
asyncValidator
AsyncValidatorFn | nullAsynchronous validator function composed of all the asynchronous validators registered with this directive.
reset
voidResets the control with the provided value if the control is present.
@paramvalue
any@returns
voidhasError
booleanReports whether the control with the given path has the error specified.
@paramerrorCode
stringThe code of the error to check
@parampath
string | (string | number)[] | undefinedA list of control names that designates how to move from the current control to the control that should be queried for errors.
@returns
booleanwhether the given error is present in the control at the given path.
If the control is not present, false is returned.
Usage notes
For example, for the following FormGroup:
form = new FormGroup({
address: new FormGroup({ street: new FormControl() })
});The path to the 'street' control from the root form would be 'address' -> 'street'.
It can be provided to this method in one of two formats:
- An array of string control names, e.g.
['address', 'street'] - A period-delimited list of control names in one string, e.g.
'address.street'
If no path is given, this method checks for the error on the current control.
getError
anyReports error data for the control with the given path.
@paramerrorCode
stringThe code of the error to check
@parampath
string | (string | number)[] | undefinedA list of control names that designates how to move from the current control to the control that should be queried for errors.
@returns
anyerror data for that particular error. If the control or error is not present, null is returned.
Usage notes
For example, for the following FormGroup:
form = new FormGroup({
address: new FormGroup({ street: new FormControl() })
});The path to the 'street' control from the root form would be 'address' -> 'street'.
It can be provided to this method in one of two formats:
- An array of string control names, e.g.
['address', 'street'] - A period-delimited list of control names in one string, e.g.
'address.street'
Description
Syncs a nested FormArray to a DOM element.
This directive is designed to be used with a parent FormGroupDirective/FormArrayDirective (selector:
[formGroup]/[formArray]).
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/FormArray instance you passed into FormGroupDirective/FormArrayDirective.
Exported by
Usage Notes
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">
@for (city of cities.controls; track city) {
<input [formControlName]="$index" placeholder="City" />
}
</div>
<button>Submit</button>
</form>
<button (click)="addCity()">Add City</button>
<button (click)="setPreset()">Set preset</button>
`,
standalone: false,
})
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']);
}
}Jump to details