Forms Validation: Validation messages in UI

Ionic Framework ionic-v3
1

Hello!

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() {
    
    return this.formBuilder.group({
      email: ['',Validators.compose([Validators.required,Validators.email])],
      terms: ['', Validators.requiredTrue],
      
      //Validation Password group
      passwordValidate: this.formBuilder.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>
                        </ion-col>
                    </ion-row>
2

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.

3

Thanks!!! @rapropos

This was the solution:

registrationForm.get('passwordValidate').hasError('areEqual')

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

Thanks again!

4

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

1 Like