Angular 14：嵌套FormGroup重置时验证器未重置及数组值异常

问题根源 #

用fb.nonNullable构建的表单，调用无参数的reset()时，Angular会默认将所有控件值设为null——这和非空表单的初始状态（FormControl为空字符串、FormArray为空数组）冲突，导致：

• 带required验证的id字段因值为null触发验证错误
• 非空FormArray被设为null，触发mat-form-field的必填/非空校验标红

解决步骤 #

• 定义与表单结构完全匹配的初始值
  提前声明表单的初始状态，确保和控件结构一一对应：

  const initialFormState = {
    // 顶层FormControl初始值
    topControl: '',
    // 嵌套FormGroup的初始值（id需符合required验证的初始状态）
    nestedGroup: {
      id: '',
      desc: ''
    },
    // FormArray初始为空数组
    f1: [],
    f2: []
  };
  

• 构建非空表单
  用fb.nonNullable创建表单时，保持和初始值结构一致：

  this.form = this.fb.nonNullable.group({
    topControl: ['', Validators.required],
    nestedGroup: this.fb.nonNullable.group({
      id: ['', Validators.required],
      desc: ['']
    }),
    f1: this.fb.nonNullable.array([]),
    f2: this.fb.nonNullable.array([])
  });
  

• 传入初始值重置表单
  调用reset()时必须传入初始状态值，而不是空调用：

  resetForm() {
    this.form.reset(initialFormState);
  }
  

额外技巧 #

• 单独重置某个FormArray（比如f2）时，可直接操作数组控件：

  const f2Array = this.form.get('f2') as FormArray;
  // 清空数组回到初始空状态
  f2Array.clear();
  // 或者直接重置为初始数组
  f2Array.reset([]);
  

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