API 参考手册
API > @angular/forms

FormArrayName

Syncs a nested FormArray to a DOM element.

查看"说明"...

参见

NgModule

选择器

属性

属性说明
@Input('formArrayName')
name: string

Tracks the name of the FormArray bound to the directive. The name corresponds to a key in the parent FormGroup or FormArray.

control: FormArray 只读

The FormArray bound to this directive.

formDirective: FormGroupDirective | null 只读

The 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.

validator: ValidatorFn | null 只读

Synchronous validator function composed of all the synchronous validators registered with this directive.

asyncValidator: AsyncValidatorFn | null 只读

Async validator function composed of all the async validators registered with this directive.

继承自 ControlContainer

继承自 AbstractControlDirective

说明

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']); } }
      
      
  1. import {Component} from '@angular/core';
  2. import {FormArray, FormControl, FormGroup} from '@angular/forms';
  3.  
  4. @Component({
  5.   selector: 'example-app',
  6.   template: `
  7.     <form [formGroup]="form" (ngSubmit)="onSubmit()">
  8.       <div formArrayName="cities">
  9.         <div *ngFor="let city of cities.controls; index as i">
  10.           <input [formControlName]="i" placeholder="City">
  11.         </div>
  12.       </div>
  13.       <button>Submit</button>
  14.     </form>
  15.     
  16.     <button (click)="addCity()">Add City</button>
  17.     <button (click)="setPreset()">Set preset</button>
  18.   `,
  19. })
  20. export class NestedFormArray {
  21.   form = new FormGroup({
  22.     cities: new FormArray([
  23.       new FormControl('SF'),
  24.       new FormControl('NY'),
  25.     ]),
  26.   });
  27.  
  28.   get cities(): FormArray { return this.form.get('cities') as FormArray; }
  29.  
  30.   addCity() { this.cities.push(new FormControl()); }
  31.  
  32.   onSubmit() {
  33.     console.log(this.cities.value);  // ['SF', 'NY']
  34.     console.log(this.form.value);    // { cities: ['SF', 'NY'] }
  35.   }
  36.  
  37.   setPreset() { this.cities.patchValue(['LA', 'MTV']); }
  38. }

方法

ngOnInit()

A lifecycle method called when the directive's inputs are initialized. For internal use only.

ngOnInit(): void
      
      ngOnInit(): void
参数

没有参数。

返回值

void

异常

错误 If the directive does not have a valid parent.

ngOnDestroy()

A lifecycle method called before the directive's instance is destroyed. For internal use only.

ngOnDestroy(): void
      
      ngOnDestroy(): void
参数

没有参数。

返回值

void

继承自 AbstractControlDirective