反応型の複数のカスタムバリデーター角度2角形、角度反応型、カスタムバリデーター、角形、角度検証

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

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 私は何も考えていない、助けてください。

回答：

回答№1の場合は3

その優れた使い方 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

---