Question

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

每个输入看起来像这样：

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

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

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

Answer 1

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

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

Answer 2

假设您正在使用上面提到的反应形式（https://angular.io/guide/reactive-forms），您可以创建一个可以附加到该组的自定义验证器

this.formbuilder.group({...}, { validator: someCustomValidator })

自定义验证器看起来像这样

export const numberMatcher = (control: AbstractControl): {[key: string]: boolean} => 
{
  const number = control.get('number');
  const number2 = control.get('number2');
  return number + number2 < 10 ? null : { exceedsmax: true };
};

需要将哪些内容导入您的组件（或存在于其中）

  import { numberMatcher } from './numberMatcher';
  ngOnInit() {
    this.form = this.formbuilder.group({
      number: ['', Validators.required],
      number2: ['', Validators.required],
     { validator: emailMatcher })
    });
  }

然后正常设置表单，确保formControlName与验证程序中正在检查的名称匹配。然后，您可以正常检查错误，即

<div class="error" *ngIf="user.get('form').touched && user.get('form').hasError('exceededmax')">
  All fields must equal less than 10
</div>

例如，

。我认为本质上这将解决您的问题，但需要从我在这里写的非常简单的大纲代码进行一些调整和调整。

Answer 3

如果您使用的是FormGroup

this.myForm = new FormGroup({
  field1: new FormControl(null, Validators.required),
  field2: new FormControl(null, Validators.required),
}, someCustomValidator);

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

3 个答案:

StackBlitz