嵌套FormGroup中FormControl验证器失效问题求助

你的问题出在创建from和to这两个FormControl时的参数传递错误：你把验证器和初始值放在同一个数组里作为第一个参数传给了FormControl构造函数，而FormControl的验证器需要作为第二个参数传入，导致单个控件的验证器根本没有被正确绑定。

修正后的代码（两种方式） #

方式1：修正FormControl的构造参数

createForm() {
  this.form = this.formBuilder.group({
    id:[0],
    dateFrom: [, Validators.required],
    dateTo: [, Validators.required],
    tempDateRange: new FormGroup({
      // 正确写法：第一个参数是初始值（这里用null，可根据需求调整），第二个参数是验证器
      from: new FormControl(null, financialYearRangeValidator),
      to: new FormControl(null, financialYearRangeValidator),
    }, periodRangeValidator),
  });
}

方式2：统一使用FormBuilder创建嵌套FormGroup（更符合Angular最佳实践）

createForm() {
  this.form = this.formBuilder.group({
    id:[0],
    dateFrom: [, Validators.required],
    dateTo: [, Validators.required],
    tempDateRange: this.formBuilder.group({
      from: [null, financialYearRangeValidator],
      to: [null, financialYearRangeValidator],
    }, { validators: periodRangeValidator }) // 嵌套组的验证器放在配置对象中
  });
}

关键说明 #

FormControl的构造函数规则是：

• 第一个参数是控件的初始值（可以是null、默认日期或其他合法值）
• 第二个参数才是单个控件的验证器函数/数组

你之前的写法new FormControl([, financialYearRangeValidator])是把一个包含undefined和验证器的数组当成了控件的初始值，完全没有把验证器绑定到正确的位置，这就是单个控件验证器不生效的核心原因。

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