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

我也收到同样的错误，我做了以下更改。

• 确保您的验证器函数签名与此匹配。 （接收控件并同步返回验证错误映射（如果存在）的函数，否则返回 null。）

  • 函数 Your_Function_Name(ObjectName: AbstractControl): ValidationErrors |空值 { }

• 您可以像这样在表单构建器中更改代码。

  • const formOptions: AbstractControlOptions = { 验证器：Your_Function_Name };

• 并在 formbuilder 对象中像这样传递到 formOptions 对象之上

  • this.formObject = this.formBuilder.group({ 全名：[''，[Validators.required]] }, formOptions);

Answer 2

问题描述

在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}

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

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;
  }
}