如何在声明阶段创建初始长度为0的FormArray？

嘿，这事儿其实超简单！你完全不用等到声明后再去修改controls.length，在Angular里，直接在声明阶段就能创建一个长度为0的空FormArray，而且这也是官方推荐的规范做法。

有两种常用的实现方式，看你习惯用FormBuilder还是直接实例化：

方式一：使用FormBuilder（更简洁） #

如果你的组件里注入了FormBuilder，直接在构建表单时给array()方法传一个空数组就行：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({/* 组件元数据 */})
export class YourComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 声明时直接创建空的criterias FormArray
    this.myForm = this.fb.group({
      criterias: this.fb.array([]) 
    });
  }

  // 后续添加元素的示例方法
  addCriteria() {
    const criteriasArray = this.myForm.get('criterias') as FormArray;
    criteriasArray.push(this.fb.control('')); // 或者push FormGroup/FormControl实例
  }
}

方式二：直接实例化FormArray #

如果不使用FormBuilder，直接用new FormArray([])就能得到空的实例：

import { Component } from '@angular/core';
import { FormArray, FormControl } from '@angular/forms';

@Component({/* 组件元数据 */})
export class YourComponent {
  criterias: FormArray;

  constructor() {
    // 声明阶段直接创建空FormArray
    this.criterias = new FormArray([]);
  }

  // 后续添加元素
  addCriteria() {
    this.criterias.push(new FormControl(''));
  }
}

为什么不推荐修改controls.length？ #

你之前用的criterias.controls.length = 0其实不是Angular官方建议的做法，直接修改controls数组的长度可能会绕过表单的变更检测逻辑，导致表单状态同步出现问题。而直接初始化空数组的方式，是完全符合表单API设计的，能保证表单状态的正确性。

内容的提问来源于stack exchange，提问作者Omtechguy