我想通过总结它们的值来验证多个数字输入字段,并为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')"