angular - 不推荐使用 FormBuilder 组

Question

我将我的项目迁移到 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]});

并且没有 validators选项不是。
我的 ValidateThirdNumber验证器:

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 重载它？

Answer 1

问题描述
来自 documentation我们看到 group() 有两条不同的线功能

group(controlsConfig: { [key: string]: any; }, options?: AbstractControlOptions): FormGroup

和

group(controlsConfig: { [key: string]: any; }, options: { [key: string]: any; }): FormGroup

第二个定义是不推荐使用的
这行的区别是 options?: AbstractControlOptions和 options: { [key: string]: any; }要了解为什么 angular 会抛出此错误，我们现在将考虑 AbstractControlOptions

interface AbstractControlOptions {
  validators?: ValidatorFn | ValidatorFn[] | null
  asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[] | null
  updateOn?: 'change' | 'blur' | 'submit'
}

我们通过注意到此结构与您的结构之间的差异是 ValidatorFn[] 来继续分解问题。

interface ValidatorFn {
  (control: AbstractControl): ValidationErrors | null
}

总的来说，在您的情况下会抛出错误，因为您的 Validator函数预计会取得控制权并返回 ValidationErrors | null .在线留言 validate(control: AbstractControl): void ，您的代码实际上返回 void但预计会返回 ValidationError | null解决方案
从问题描述来看，解决办法就是简单的修改 ValidatorFn确保您的 ValidatorFn返回 ValidationError或者如果没有错误返回 null来自 ValidationErrors defination

type ValidationErrors = {
    [key: string]: any;
};

您将需要返回一个键值对对象，例如 {required_if: true}我们可以通过按预期添加 return 语句来更改您的代码

class ValidateThirdNumber {
  static validate(control: AbstractControl): ValidationErrors | null {
      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});
        return ({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});
        return ({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});
        return ({not_the_same: true});
      }
    }
    return null;
  }
}