web-dev-qa-db-ja.com

リアクティブ形式の複数のカスタムバリデーターangular 2

reactive formに2つのカスタムvalidatorがあります。以下の関数を呼び出して、コンポーネントコンストラクターでフォームを作成します。

private createForm(): void {
this.passwordUpdateForm = this.formBuilder.group({
    newpassword : [null, Validators.required],
    passwordconfirm: [null, Validators.required]
},
{
    validator: [PasswordValidation.PasswordMatch, PasswordValidation.PasswordRule] // validation method

});

}

PasswordValidationは、以下のような2つの関数を持つクラスです。

    export class PasswordValidation {

     public  static PasswordMatch(control: AbstractControl) {
        let password = control.get('newpassword'); // to get value in input tag
        if(password){
            let confirmPassword = control.get('passwordconfirm').value; // to get value in input tag
            if (password.value !== confirmPassword) {
                control.get('passwordconfirm').setErrors({ ['passwordmatch'] : true});
            }else {
                return null;
            }
        }
    }

    public static PasswordRule(control: AbstractControl) {
        let password = control.get('newpassword').value; // to get value in input tag
        let pattern = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,64}');               
        if (!pattern.test(password)) {
            control.get('newpassword').setErrors({ ['passwordrule'] : true});
        }else if (password.toLowerCase() === 'something') {
            control.get('newpassword').setErrors({ ['passwordrule'] : true});
        }else {
            return null;
        }
    }
}

各カスタムバリデーターは、このように個別に正常に機能します

validator: PasswordValidation.PasswordMatch

またはこれ

validator: PasswordValidation.PasswordRule

しかし、それらの両方を次のような配列で使用します

validator: [PasswordValidation.PasswordMatch, PasswordValidation.PasswordRule]

エラーthis.validator is not a functionが発生し、機能しません。わかりません。助けてください。

angularangular-reactive-formscustom-validatorsangular-formsangular-validation
6
Parid0kht

フォームグループ内の特定のユーザーコントロールで使用されるバリデーターの配列を受け入れるValidators.compose([])を使用することをお勧めします。

たとえば、passwordconfirmおよびnewpasswordコントロールに対してバリデーターを追加する場合は、以下のように行うことができます。

private createForm(): void {
this.passwordUpdateForm = this.formBuilder.group({
    newpassword : [null, Validators.compose([Validators.required,PasswordValidation.PasswordRule])],
    passwordconfirm: [null, Validators.compose([Validators.required, PasswordValidation.PasswordMatch])]
});

ボンネットの下では、これはコードがどのように見えるかです

group(controlsConfig: {[key: string]: any}, extra: {[key: string]: any} = null): FormGroup {
  const controls = this._reduceControls(controlsConfig);
  const validator: ValidatorFn = isPresent(extra) ? extra['validator'] : null;
  const asyncValidator: AsyncValidatorFn = isPresent(extra) ? extra['asyncValidator'] : null;
  return new FormGroup(controls, validator, asyncValidator);
}

パラメータvalidatorは、実際には次のようなインターフェイスValidatorFnの一種であることがわかります。

interface ValidatorFn { 
  (c: AbstractControl): ValidationErrors|null
}

したがって、上記のシグネチャを持つすべてのメソッドを受け入れることができることがわかります。

ソース： https://angular.io/api/forms/ValidatorFn

詳細については、このリンクを確認してください： https://toddmotto.com/reactive-formgroup-validation-angular-2

6
Niladri