Angular 不推荐使用FormBuilder组

我将我的项目迁移到angular 11，我注意到我添加的全局验证使

FormBuilder.group

与以下消息一起被弃用：

group is deprecated: This api is not typesafe and can result in issues with Closure Compiler renaming.
Use the `FormBuilder#group` overload with `AbstractControlOptions` instead.

所以这是不推荐的：

  ingredientForm = this.fb.group({
    ingredientType: ['', Validators.required],
    ingredientFlavor: [''],
    isMultiFlavor: [''],
    ingredientBrand: [''],
    ingredientName: [''],
    imageFile: ['']
  }, {validators: [ValidateThirdNumber.validate]});

如果没有

验证器

选项，它就不是

my

ValidateHirdNumber

validator:

class ValidateThirdNumber {
  static validate(control: AbstractControl): void {
      if (control) {
      const isMultiFlavor = control.get('isMultiFlavor')?.value;
      const ingredientFlavor = control.get('ingredientFlavor')?.value;
      const ingredientBrand = control.get('ingredientBrand')?.value;
      const ingredientName = control.get('ingredientName')?.value;
      if (isMultiFlavor && ingredientFlavor.trim().length === 0) {
        control.get('ingredientFlavor')?.setErrors({required_if: true});
      } else {
        control.get('ingredientFlavor')?.setErrors(null);
      }
      if (!ingredientFlavor && !ingredientBrand && !ingredientName) {
        control.get('ingredientName')?.setErrors({required_at_least: true});
        control.get('ingredientFlavor')?.setErrors({required_at_least: true});
        control.get('ingredientBrand')?.setErrors({required_at_least: true});
      } else {
        control.get('ingredientName')?.setErrors(null);
        control.get('ingredientFlavor')?.setErrors(null);
        control.get('ingredientBrand')?.setErrors(null);
      }
      if (ingredientBrand && ingredientName && ingredientName === ingredientBrand) {
        control.get('ingredientName')?.setErrors({not_the_same: true});
        control.get('ingredientBrand')?.setErrors({not_the_same: true});
      }
    }
  }
}

如何使用AbstractControlOptions重载它？

问题描述 从中，我们可以看到使用

group（）

函数的两行代码

group（controlsConfig:{[key:string]：any；}，options？：AbstractControlOptions）：FormGroup

和

group（controlsConfig:{[key:string]：any；}，选项：{[key:string]：any；}）：FormGroup

第二个定义是不推荐的

这两行之间的区别是

options？：AbstractControlOptions

和

options:{[key:string]：any；}

为了理解角为什么抛出这个错误，我们现在将考虑< /P>

接口抽象控制选项{
验证器？：验证器fn |验证器fn[]|空
asyncValidators？：AsyncValidatorFn | AsyncValidatorFn[]| null
更新？：“更改”|“模糊”|“提交”
}

我们继续细分问题，注意到此结构与您的结构之间的差异是

接口验证程序fn{
（控件：AbstractControl）：ValidationErrors | null
}

总的来说，在您的案例中会抛出错误，因为您的

验证器

函数需要控制并返回

ValidationErrors | null

。在

validate（control:AbstractControl）：void

行中，您的代码实际返回

void

，但预期返回

ValidationError | null

解决方案 根据问题描述，解决方案是简单地修改

验证器fn

确保您的

ValidatorFn

返回

ValidationError

或者如果没有错误，则返回

null

从

类型验证错误={
[键：字符串]：任意；
};

您需要返回一个键值对对象，例如

{required\u if:true}

我们可以通过按预期添加返回语句来更改您的代码

class ValidateHirdNumber{
静态验证（控件：AbstractControl）：ValidationErrors | null{
如果（控制）{
const isMultiFlavor=control.get（'isMultiFlavor'）？.value；
const ingredientFlavor=control.get（'ingredientFlavor'）？.value；
const ingredientBrand=control.get（'ingredientBrand'）？.value；
const ingredientName=control.get（'ingredientName'）？.value；
if（isMultiFlavor&&IngreditFlavor.trim（）.length==0）{
control.get（'IngreditFlavor'）？.setErrors（{required_if:true}）；
返回（{required_if:true}）；
}否则{
control.get（'IngreditFlavor'）？.setErrors（null）；
}
如果（！ingredientFlavor&&！ingredientBrand&&！ingredientName）{
control.get（'IngreditName'）？.setErrors（{required_至少：true}）；
control.get（'IngreditFlavor'）？.setErrors（{required_至少：true}）；
control.get（'IngreditBrand'）？.setErrors（{required_至少：true}）；
返回（{required_至少：true}）；
}否则{
控件.get（'IngreditName'）？.setErrors（null）；
control.get（'IngreditFlavor'）？.setErrors（null）；
control.get（'IngreditBrand'）？.setErrors（null）；
}
if（ingredientBrand&&ingredientName&&ingredientName===ingredientBrand）{
control.get（'IngreditName'）？.setErrors（{not_the_same:true}）；
control.get（'IngreditBrand'）？.setErrors（{not_the_same:true}）；
返回（{not_the_same:true}）；
}
}
返回null；
}
}

我想你可以在这里解释反对意见的部分找到解决方案：@Ploppy我在发布这个问题之前阅读了文档，不幸的是没有多大帮助，不知道该怎么办