## 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`属性是最好获取数组中值的方式。