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

我在angular中使用反应式表单验证，并尝试为不同的应用程序添加不同的消息
在有效性方面，例如，如果我的分数字段应该在1-100之间，我希望在用户输入字母时有一条消息，如果用户输入的数字大于100，则有另一条消息

有没有办法通过创建一个接口来实现这一点：

interface error {
     condition: boolean,
     message: string
}

使用ngFor并迭代错误集合，检查是否满足条件

---

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

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

customError（）{
返回（控件：AbstractControl）=>{
if（isNaN（control.value））返回{error:“它不是一个数字”}；
如果（+control.value>100）返回{error:“它大于100”}；
返回null；
};
}
{{myform.get（'control'）.errors.error}

还可以返回具有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>

customError（）{
返回（控件：AbstractControl）=>{
if（isNaN（control.value））返回{errorNaN:“它不是一个数字”}；
如果（+control.value>100）返回{errorGt:“它大于100”}；
返回null；
};
}
这不是一个数字
大于100

---

一个简单的例子

看看自定义验证器。您可以使用这些设置自定义验证，然后可以侦听错误字符串并显示消息。Ben，第一个示例仅显示一条唯一的错误消息，并且您有一个唯一的div。定义的customError只会给您一个唯一的错误，但是否有方法循环所有现有错误，不是手动为每一个创建div，而是类似于：。{{error.message}}。错误是一个对象，因此需要使用KeyValuePipe，例如

{{{error.key}}:{{{error.value}