时间戳

首页 > 解决方案 > 反应式表单条件自定义验证

angular - 反应式表单条件自定义验证

问题描述

我在角度使用反应式表单验证，并且我正在尝试为不同的无效添加不同的消息
，例如，如果我有一个应该在 1-100 之间的分数字段，我希望在用户如果输入大于 100 的数字，则输入字母和不同的消息。

有没有办法通过创建接口来做到这一点：

interface error {
     condition: boolean,
     message: string
}

使用 ngFor 并迭代一组错误，检查是否满足条件？

我遇到的问题是条件链接到 function() ：布尔值，当用户输入无效输入时，ngFor 不会再次呈现自身，因为集合没有变化，但条件函数将返回的值.

标签： angularvalidationangular-reactive-formsngforangular-forms

解决方案

当您创建 customValidator 时，如果发生错误，您将返回一个对象。根据您的要求，此对象可以不同。

  customError() {
    return (control: AbstractControl) => {
      if (isNaN(control.value)) return { error: "it's not a number" };
      if (+control.value > 100) return { error: "it's greater than 100" };
      return null;
    };
  }

   <div *ngIf="myform.get('control').errors">
         {{myform.get('control').errors.error}}
   </div>

您还可以返回具有不同属性的对象，例如 errorNaN 和 errorGt

  customError() {
    return (control: AbstractControl) => {
      if (isNaN(control.value)) return { errorNaN : "it's not a number" };
      if (+control.value > 100) return { errorGt: "it's greater than 100" };
      return null;
    };
  }

   <div *ngIf="myform.get('control').errors?.errorNaN">
      It's not a number
   </div>
   <div *ngIf="myform.get('control').errors?.errorGt">
      it's greater than 100
   </div>

一个简单的例子stackblitz

推荐阅读