mehrere kundenspezifische Validatoren in reaktiver Form Winkel 2 - Winkel, Winkel-reaktive Formen, Custom-Validatoren, Winkelformen, Winkelvalidierung

Ich habe zwei Sitten validator in einem reactive form, Rufe ich die Funktion unten auf, um ein Formular im Komponentenkonstruktor zu erstellen:

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

});

}

Passwortvalidierung ist eine Klasse mit zwei Funktionen wie unten

    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;
}
}
}

Jeder benutzerdefinierte Validator funktioniert separat so

validator: PasswordValidation.PasswordMatch

oder dieses

validator: PasswordValidation.PasswordRule

aber beide in Array wie verwenden

validator: [PasswordValidation.PasswordMatch, PasswordValidation.PasswordRule]

Fehler bekommen this.validator is not a function und funktioniert nicht, ich habe keine Ahnung, bitte helfen.

Antworten:

3 für die Antwort № 1

es ist besser zu benutzen Validators.compose([]) Dies akzeptiert das Array von Validatoren, das für das bestimmte Benutzersteuerelement in der Formulargruppe verwendet werden soll.

zum Beispiel, wenn Sie die Validatoren gegen die hinzufügen möchten passwordconfirm und newpassword steuern Sie können es tun, wie unten

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

Unter der Haube sieht so der Code aus

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);
}

Sie können den Parameter sehen validator ist eigentlich eine Art von Schnittstelle ValidatorFn was wie folgt aussieht

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

So können Sie sehen, dass es jede Methode akzeptieren kann, die die obige Signatur hat.

Quelle : https://angular.io/api/forms/ValidatorFn

Überprüfen Sie diesen Link für mehr: https://toddmotto.com/reactive-formgroup-validation-angular-2

---