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

Question

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

每个输入看起来像这样：

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

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

我有一个函数，如果所有输入字段的总和小于或等于 10，则返回 true。 但是我如何使用自定义 Angular 验证器来实现这一目标呢？这样错误信息就会立即出现。

Answer 1

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

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

然后在验证器中迭代组中的表单控件，根据有效与否总结并返回错误或

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')"

堆栈闪电战

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);

Answer 4

我遇到了同样的问题，并在 Angular 16 中解决了它，如下所示：

在.ts文件中：

import {AbstractControl, ValidationErrors} from '@angular/forms';

this.form = this.formBuilder.group({
            control1: ['', [Validators.required]]
        }, {validators: this.sumUpValidator});

sumUpValidator(formGroup: AbstractControl): ValidationErrors | null {
  let sum = 0;
  for(let a in formGroup.value) {
    sum += formGroup.value[a];
  }
  if (sum != 10) {
    return { sumUpValidator: true };
  }
  return null;
}

在 .html 中

<div *ngIf="form.errors?.sumUpValidator">
     The total value must be 10.
</div>