填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

FormArrayName

將巢狀的 FormArray 同步到 DOM 元素。

Syncs a nested FormArray to a DOM element.

檢視"說明"...

參見

Exported from

選擇器

屬性

屬性說明
@Input('formArrayName')
name: string | number | null

追蹤繫結到指令 FormArray 的名稱。該名稱對應於父 FormGroupFormArray 中的鍵名。接受字串或數字形式的名稱。字串形式的名稱對於單個表單很有用,而數字形式則允許在 FormArray 陣列上進行迭代時將表單陣列繫結到索引。

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唯讀

要繫結到此指令的 FormArray

The FormArray bound to this directive.

formDirective: FormGroupDirective | null唯讀

該組的最上層指令(如果存在),否則為 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.

繼承自 ControlContainer

繼承自 AbstractControlDirective

說明

此指令旨在與父 FormGroupDirective(選擇器為 [formGroup] )一起使用。

This directive is designed to be used with a parent FormGroupDirective (selector: [formGroup]).

它接受你要連結的巢狀 FormArray 的字串名稱,並尋找使用這個名字在你傳給 FormGroupDirective 的父 FormGroup 實例中註冊的 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']);
  }
}
    

繼承自 AbstractControlDirective