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

Question

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

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

interface error {
     condition: boolean,
     message: string
}

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

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

Answer 1

当您创建 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