Angular FormBuilder 组已弃用 [重复]答案

【问题标题】：Angular FormBuilder group is deprecated [duplicate]Angular FormBuilder 组已弃用 [重复]
【发布时间】：2021-04-12 03:10:06
【问题描述】：

我看到有一个主题看起来像我的，但它并没有真正回答我的问题，因为我们没有以相同的方式管理错误。 FormBuilder group is deprecated

首先，我刚刚迁移到 Angular 11，现在遇到了这个问题：

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.

在这个页面中，我在我的页面上自动生成了许多表单，并且在日期范围的情况下，我使用了两个日期选择器。我创建了一个函数来检查 2 个日期选择器中的值。

组件：

newGroup = this.fb.group(
        {
          [node.type + '_' + node.objectId + '_dateFrom']: [
            '',
            [Validators.required]
          ],
          [node.type + '_' + node.objectId + '_dateTo']: [
            '',
            [Validators.required]
          ]
        },
        {
          validator: CheckFromToDate(
            node.type + '_' + node.objectId + '_dateFrom',
            node.type + '_' + node.objectId + '_dateTo'
          )
        }
      );

验证器：

export function CheckFromToDate(fromName: string, toName: string) {
  return (formGroup: FormGroup) => {
    const from = formGroup.controls[fromName];
    const to = formGroup.controls[toName];
    const dateFrom = new Date(from.value);
    const dateTo = new Date(to.value);
    const today = new Date();
    if (to.errors && from.errors) {
      // return if another validator has already found an error on the matchingControl
      return;
    }
    if (!from.value) {
      from.setErrors({ wrongDate: true });
      to.setErrors(null);
    } else if (!to.value) {
      to.setErrors({ wrongDate: true });
      from.setErrors(null);
    } else if (dateFrom.getTime() < -3600000) {
      from.setErrors({ wrongDate: true });
      to.setErrors(null);
    } else if (dateFrom > today) {
      from.setErrors({ wrongDate: true });
      to.setErrors(null);
    } else if (dateTo.getTime() < -3600000) {
      to.setErrors({ wrongDate: true });
      from.setErrors(null);
    } else if (dateTo > today) {
      to.setErrors({ wrongDate: true });
      from.setErrors(null);
    } else if (dateFrom.getTime() > dateTo.getTime()) {
      from.setErrors({ fromTo: true });
      to.setErrors({ fromTo: true });
    } else {
      from.setErrors(null);
      to.setErrors(null);
    }
  };
}

如何让我的验证器使用 Angular 11 中处理验证器的新方法？

【问题讨论】：

你能链接你已经找到的东西，而不是描述它吗？
谢谢你的评论，我刚刚做到了。

标签： angular angular2-forms angular-validation angular2-formbuilder angular2-form-validation

【解决方案1】：

从

更改您的验证器签名

return (formGroup: FormGroup)

到

return (controls: AbstractControl)

然后更改您访问控件的方式

const from = formGroup.controls[fromName];

到

const from= controls.get(fromName);

同时更改您报告错误的方式

from.setErrors({ wrongDate: true });

到

return from.setErrors({ wrongDate: true }); // note the return statement.

最后一个改变是改变

newGroup = this.fb.group(
        {
           ...
        },
        {
          validator: CheckFromToDate(
            node.type + '_' + node.objectId + '_dateFrom',
            node.type + '_' + node.objectId + '_dateTo'
          )
        }
      );

到

newGroup = this.fb.group(
        {
           ...
        },
        {
          validator: CheckFromToDate(
            node.type + '_' + node.objectId + '_dateFrom',
            node.type + '_' + node.objectId + '_dateTo'
          )
        } as AbstractControlOptions
      );

注意转换为AbstractControlOptions，这应该会删除已弃用的警告。

详细解释可以参考official documentation。

【讨论】：

【解决方案2】：

用户，验证器应该返回一个对象（如果错误）或 null（如果没有错误）。你不应该使用 setError。替换你的 from.setErrors 和 to.setErrors，你可以返回，例如如果有一个错误的对象像

{errorFrom:...,errorTo:...}

所以，你的验证器喜欢

return (formGroup: FormGroup) => {
    ...
    const error={errorFrom:null,errorTo:null}

    if (to.errors && from.errors) {
      // return if another validator has already found an error on the matchingControl
      return null;
    }
    if (!from.value) {
      error.errorFrom="wrong Date from"
    } else if (!to.value) {
      error.errorTo="wrong Date to"
    } else if (dateFrom.getTime() < -3600000) {
      error.errorFrom="wrong Date from"
    } else if (dateFrom > today) {
      error.errorTo="From greater than today"
    } else if (dateTo.getTime() < -3600000) {
      error.errorTo="wrong Date to"
    } else if (dateTo > today) {
      error.errorTo="To greater than today"
    } else if (dateFrom.getTime() > dateTo.getTime()) {
      error.errorTo="from greater than to"
      error.errorFrom="from greater than to"
    }
    //if error.errorTo!=null or error.errorFrom!=null, the error, else null
    return error.errorTo || error.errorFrom? error:null;
  };

你可以像往常一样控制

 <span *ngIf="form.get(node.type + '_' + node.objectId + '_dateFrom').errors?.errorFrom>
  {{form.get(node.type + '_' + node.objectId + '_dateFrom').errors.errorFrom}}
 </span>

【讨论】：