Angular 5：通过总和值验证多个输入字段

发布时间：2020-12-17 17:59:26 所属栏目：安全来源：网络整理

导读：我想通过总结它们的值来验证多个数字输入字段,并为Angular创建一个自定义验证器. 每个输入看起来像这样： input type="number" min="0" max="10" 有多个数字输入,每个人都可以有0到10之间的值,但所有字段的总和必须小于或等于10. 我有一个函数,如果所有输入

我想通过总结它们的值来验证多个数字输入字段,并为Angular创建一个自定义验证器.

每个输入看起来像这样：

<input type="number" min="0" max="10">

有多个数字输入,每个人都可以有0到10之间的值,但所有字段的总和必须小于或等于10.

我有一个函数,如果所有输入字段的总和小于或等于10,则返回true.
但是我如何使用自定义Angular Validator实现这一目标？这样就可以立即显示错误消息.

解决方法

就像在组本身上提到的设置验证一样,例如：

this.myForm = fb.group({
  field1: [null],field2: [null]
  // more fields 
},{validator: this.myValidator})

然后在您的验证器中迭代组中的formcontrols,总结并返回错误或基于有效或无效的null：

myValidator(group: FormGroup) {
  let sum = 0;
  for(let a in group.controls) {
    sum += group.get([a]).value;
  }
  return sum > 10 ? { notValid: true} : null
}

在模板中,您可以显示错误：

*ngIf="myForm.hasError('notValid')"

StackBlitz

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!