模板语法
服务端渲染
API / @angular/forms

FormArrayName

Syncs a nested FormArray to a DOM element.

@Directive({ selector: '[formArrayName]', providers: [formArrayNameProvider] }) class FormArrayName extends ControlContainer implements OnInit, OnDestroy { name: string get control: FormArray get formDirective: FormGroupDirective | null get path: string[] get validator: ValidatorFn | null get asyncValidator: AsyncValidatorFn | null ngOnInit(): void ngOnDestroy(): void // 继承自 forms/ControlContainer name: string get formDirective: Form | null get path: string[] | null // 继承自 forms/AbstractControlDirective abstract get control: AbstractControl | null get value: any get valid: boolean | null get invalid: boolean | null get pending: boolean | null get disabled: boolean | null get enabled: boolean | null get errors: ValidationErrors | null get pristine: boolean | null get dirty: boolean | null get touched: boolean | null get status: string | null get untouched: boolean | null get statusChanges: Observable<any> | null get valueChanges: Observable<any> | null get path: string[] | null reset(value: any = undefined): void hasError(errorCode: string, path?: string[]): boolean getError(errorCode: string, path?: string[]): any }

选择器

[formArrayName]

输入参数

formArrayName 绑定到 FormArrayName.name

说明

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.

Nested form arrays can come in handy when you have a group of form controls but you're not sure how many there will be. Form arrays allow you to create new form controls dynamically.

Access the array: You can access the associated FormArray using the get method on the parent FormGroup. Ex: this.form.get('cities').

Get the value: the value property is always synced and available on the FormArray. See a full list of available properties in AbstractControl.

Set the value: You can set an initial value for each child control when instantiating the FormArray, or you can set the value programmatically later using the FormArray's setValue or patchValue methods.

Listen to value: If you want to listen to changes in the value of the array, you can subscribe to the FormArray's valueChanges event. You can also listen to its statusChanges event to be notified when the validation status is re-calculated.

Add new controls: You can add new controls to the FormArray dynamically by calling its push method. Ex: this.form.get('cities').push(new FormControl());

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']); } }

属性

属性名类型说明
name
control只读
formDirective只读
path只读
validator只读
asyncValidator只读

方法

ngOnInit()

ngOnInit(): void

参数

没有参数。

返回值

void

ngOnDestroy()

ngOnDestroy(): void

参数

没有参数。

返回值

void