web-dev-qa-db-ja.com

Angular 5：合計値によって複数の入力フィールドを検証します

複数の数値入力フィールドの値を合計して検証し、Angularのカスタムバリデーターを作成します。

すべての入力は次のようになります。

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

複数の数値入力があり、全員が0〜10の値を持つことができますが、すべてのフィールドの合計は10以下でなければなりません。

すべての入力フィールドの合計が10以下の場合にtrueを返す関数がありますが、カスタムAngular Validator？.

angularvalidationangular5
7
Lars

前述のように、グループ自体のセット検証なので、たとえば次のようにします。

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

次に、バリデーターでグループ内のformcontrolを繰り返し、合計して、有効かどうかに基づいてエラーまたは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

13
AJT82

上記のようにリアクティブフォーム（ 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>

例えば。本質的にこれで問題が解決すると思いますが、ここで書いた非常に単純なアウトラインコードからの調整と調整が必要になります。

1
Jack Scott

FormGroupを使用している場合

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