web-dev-qa-db-ja.com

Angular-カスタムバリデーターをFormGroupに割り当てます

カスタム検証ツールをFormGroupに割り当てる必要があります。 FormGroupが次のように作成されたときにこれを行うことができます。

let myForm : FormGroup;

myForm = this.formBuilder.group({
        myControl1: defaultValue,
        myControl2: defaultValue
      }, { validator: this.comparisonValidator })

comparisonValidator(g: FormGroup) {
      if (g.get('myControl1').value > g.get('myControl2'.value)) {
        g.controls['myControl1'].setErrors({ 'value2GreaterThanValue1': true });
        return;
      }
}

ただし、カスタムバリデーターを追加する必要がある状況がありますafterFormGroupをインスタンス化したので、myFormをインスタンス化した後にこれを実行しようとしています、フォームのインスタンス化時にバリデーターを追加する代わりに：

let myForm : FormGroup;

myForm = this.formBuilder.group({
        myControl1: defaultValue,
        myControl2: defaultValue
      })

this.myForm.validator = this.comparisonValidator;

これにより、コンパイラエラーが発生します。

Type '(g: FormGroup) => void' is not assignable to type 'ValidatorFn'.
  Type 'void' is not assignable to type 'ValidationErrors'.

FormGroupが引数としてformGroup関数に渡されるように、comparisonValidatorにバリデーターを割り当てるにはどうすればよいですか？

更新-検証エラーの設定方法を明確にするために、setErrorsのcomparisonValidatorの実行場所を示す行を追加しました。

javascriptangulartypescriptangular-reactive-formsangular-validation
9
Chris Halcrow

stackblitz を作成しました。

Component.tsファイル内

import { Component } from '@angular/core';
import {FormBuilder,FormGroup, ValidationErrors, ValidatorFn} from '@angular/forms'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  myForm: FormGroup;
  defaultValue = 20;

constructor(private formBuilder: FormBuilder) {
  this.myForm = this.formBuilder.group({
        myControl1: this.defaultValue,
        myControl2: this.defaultValue
      });
      debugger
      this.myForm.setValidators(this.comparisonValidator())
}

 public comparisonValidator() : ValidatorFn{
       return (group: FormGroup): ValidationErrors => {
          const control1 = group.controls['myControl1'];
          const control2 = group.controls['myControl2'];
          if (control1.value !== control2.value) {
             control2.setErrors({notEquivalent: true});
          } else {
             control2.setErrors(null);
          }
          return;
    };
 }
}

Component.htmlファイル内

<div>
  <form [formGroup]="myForm">
    <input formControlName="myControl1" type="number">
    <input formControlName="myControl2"  type="number">
    <br>Errors: {{myForm.get('myControl2').errors | json}}
  </form>
</div>
12
Anuradha Gunasekara

FormGroupのインスタンス化後にバリデーター（事前定義またはカスタム）を設定するには、FormGroupのsetValiators（）メソッドを使用する必要があります。例：

  let myFormGroup = this.    _fb.group({
      control1: new FormControl('1', [])
    });
  myFormGroup.setValidators(this.customValidators());
  customValidators(): ValidatorFn {
   let myFun = (cc: FormGroup): ValidationErrors => {
     if(cc.valid) return null;
     else return {something: 'someError'};
   };
   return myFun;
  }

ここでプレイできます

3
Shadab Faiz

@Anuradha Gunasekaraに感謝します-彼の答えは最も正確で完全なソリューションです。私のエラーの「簡単な修正」は、バリデーターに戻り型anyを追加することだけでした。それでもカスタムバリデータをFormGroupに割り当てることができ、FormGroupはカスタムバリデータへの引数として暗黙的に渡されます。このコードは機能します：

let myForm : FormGroup;

myForm = this.formBuilder.group({
           myControl1: defaultValue,
           myControl2: defaultValue
         })

this.myForm.validator = this.comparisonValidator;

comparisonValidator(g: FormGroup) : any {
      if (g.get('myControl1').value > g.get('myControl2'.value)) {
        g.controls['myControl1'].setErrors({ 'value2GreaterThanValue1': true });
      }
}
3
Chris Halcrow