Forms Validation: Validation messages in UI


I’m working with forms and its validation.
My big question is with the “password” and “confirmPassword” validation.
I need to show some text error or warning when they don’t match.

I have made the logic and works well, but I don’t know how to set this message in the HTML for the UI.

Thanks for the HELP!

This is my Validator File TS called inside of the validation Form:

 static validatePassword(g: FormGroup) {
               return g.get('password').value === g.get('passwordConfirm').value
                   ? null : {'mismatch': true};

This is my TS file:

private createRegisterForm() {
      email: ['',Validators.compose([Validators.required,])],
      terms: ['', Validators.requiredTrue],
      //Validation Password group
        password: ['',Validators.compose([Validators.minLength(6),Validators.required])],
        passwordConfirm: ['', Validators.compose([Validators.minLength(6),Validators.required])]
      }, { validator: SuperValidatorForm.validatePassword}) //Password validations are equal?

This my HTML file:

                    <ion-row align-items-center *ngIf="(registrationForm.get('passwordValidate.password').errors && registrationForm.get('passwordValidate.password').dirty)
                            || (registrationForm.get('passwordValidate.passwordConfirm').errors && registrationForm.get('passwordValidate.passwordConfirm').dirty)">
                        <ion-col push-2>
                            <p color="danger" ion-text *ngIf="registrationForm.get('passwordValidate.password').hasError('required')">
                                Password field is required.</p>
                            <p color="danger" ion-text *ngIf="registrationForm.get('passwordValidate.password').hasError('minlength')">
                                Password field length is 6 characteres.</p>
                            <p color="danger" ion-text *ngIf="registrationForm.get('passwordValidate.passwordConfirm').hasError('required')">
                                Confirm Password field is required.</p>
                            <p color="danger" ion-text *ngIf="  LOGIC FOR MESSAGE !!! ">
                                Passwords must match.</p>

You can use the same sort of hasError() idiom on registrationForm itself to see the ‘mismatch’ error, in the same way you are currently doing on individual controls.

Thanks!!! @rapropos

This was the solution:


Do you have an example of “username exists” validation?
I’ll appreciate very much.

Thanks again!

Presuming that requires hitting some network backend to check, it would need to be asynchronous. There is documentation about that here.

1 Like