багаторазові користувальницькі валідатори в реактивній формі кутові 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 це клас з двома функціями, як показано нижче

    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 і не працює, у мене немає ніякої ідеї, будь ласка, допоможіть.

Відповіді:

3 для відповіді № 1

його краще використовувати 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

---