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

Question

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

每个输入看起来像这样：

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

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

我有一个函数，如果所有输入字段的总和小于或等于 10，则 returns 为真。但是我如何使用自定义 Angular 验证器实现这一点？以便错误信息立即出现。

Answer 1

假设您正在使用上面提到的反应形式 (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 2

就像提到的对组本身进行设置验证一样，例如：

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

然后在你的验证器中迭代你组中的表单控件，总结并return错误或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 3

如果您正在使用 FormGroup

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

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

Angular 5: Validate multiple input fields by sum up values

validation

angular

angular5

StackBlitz