## FormArray 追蹤一組`FormControl`實例的值和驗證狀態。 `FormArray`聚合每一個子節點(`FormControl`)的值和驗證狀態到一個數組，通過逐步減少子節點狀態計算它自身狀態。例如：如果在`FormArray`中有一個子節點驗證失敗，那么最終整個數組驗證也會失敗。 `FormArray`同`FormControl`及`FormGroup`一同構成Angular表單3大基礎功能模塊。 ### 使用方式 實例化`FormArray`，傳入一個子節點數組作為第1個參數。 ```javascript const arr = new FormArray([ new FormControl('Nancy', Validators.minLength(2)), new FormControl('Drew'), ]); console.log(arr.value); // ['Nancy', 'Drew'] console.log(arr.status); // 'VALID' ``` 也可以傳入一個同步/異步驗證數組(`Validators`/`AsyncValidators`)作為第2個參數。當需要驗證至少一個子節點值和狀態時，這些功能本身就是內在支持的。 ### 添加或者移除控件 可以通過調用`FormArray`本身的`push`, `insert`或者`removeAt`方法來改變數組中的控件。這些方法能夠保證在表單層級樹中控件狀態能夠合理的被跟蹤到。不建議直接修改`FormArray`中的`AbstractControl`實例，因為它會導致一些奇怪和無法預期的行為，例如打斷Angular的值檢測。 ### Class ```javascript class FormArray { constructor(controls: AbstractControl[], validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn) controls : AbstractControl[] at(index: number) : AbstractControl push(control: AbstractControl) : void insert(index: number, control: AbstractControl) : void removeAt(index: number) : void setControl(index: number, control: AbstractControl) : void length : number setValue(value: any[], {onlySelf}?: {onlySelf?: boolean}) : void patchValue(value: any[], {onlySelf}?: {onlySelf?: boolean}) : void reset(value?: any, {onlySelf}?: {onlySelf?: boolean}) : void getRawValue() : any[] } ``` ### 屬性 - controls : `AbstractControl[]` 包含的控件集合 - at(index: `number`) : `AbstractControl` 獲取指定`index`對應`AbstractControl` - push(control: `AbstractControl`) : `void` 插入一個新的`AbstractControl`到數組末尾。 - insert(index: `number`, control: `AbstractControl`) : `void` 在指定`index`處插入一個新的`AbstractControl` - removeAt(index: `nubmer`) : `void` 移除指定`index`處的控件 - setControl(index: `number`, control: `AbstractControl`) : `void` 替換已存在的控件 - length : `number` 控件組的長度 - setValue(value: `any[]`, {onlySelf}?: {onlySelf?: `boolean`}) : void 設置`FormArray`的值。接收一個由滿足控件簽名的值組成的數組。 該方法會執行嚴格檢查，即如果嘗試傳遞一個不存在或被移除的控件，它會直接拋出錯誤。 ```typescript const arr = new FormArray([ new FormControl(), new FormControl() ]); console.log(arr.value); // [null, null] arr.setValue(['Nancy', 'Drew']); console.log(arr.value); // ['Nancy', 'Drew'] ``` - patchValue(value: `any[]`, {onlySelf}?: {onlySelf?: `boolean`}) : `void` 填充`FormArray`數組的值，同樣接收一個滿足控件聲明元素組成的數組件值，不同的是它會盡量把傳入的參數匹配到正確控件。它可以接收上一級或者子集數組，而不會報錯。 ```typescript const arr = new FormArray([ new FormControl(), new FormControl() ]); console.log(arr.value); // [null, null] arr.patchValue(['Nancy']); console.log(arr.value); // ['Nancy', null] ``` - reset(value?: `any`, {onlySelf?}: {onlySelf?: `boolean`}) : `void` 重置`FormArray`值。 You can also reset to a specific form state by passing in an array of states that matches the structure of the control. The state can be a standalone value or a form state object with both a value and a disabled status. ```typescript this.arr.reset(['name', 'last name']); console.log(this.arr.value); // ['name', 'last name'] ``` 或者： ```typescript this.arr.reset([ {value: 'name', disabled: true}, 'last' ]); console.log(this.arr.value); // ['name', 'last name'] console.log(this.arr.get(0).status); // 'DISABLED' ``` - getRawValue() : `any[]` 獲取`FormArray`數組的聚合值，包含任何被禁用的控件。 如果想獲取所有值包括被禁用的狀態，請使用此方法。否則，使用`value`屬性是最好獲取數組中值的方式。