反应形式验证

Question

我正在用angular进行反应式表单验证，并且我尝试为不同的消息添加不同的消息无效，例如，如果我的分数字段应该在1到100之间，那么我希望在用户输入字母时显示一条消息，而在用户输入大于100的数字时显示不同的消息。

是否可以通过创建接口来做到这一点：

Interface error{
     condition: boolean,
     message: string
}

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

我的问题是条件链接到function（）：boolean，并且当用户输入无效输入时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>

您还可以返回具有differents属性的对象，例如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>