Show error messages when form validation

Ionic Framework ionic-v3
1

Hello,

I am working on a project and i working on registration page right now, and i have been creating form validation for my form, I basically set validation using Angular reactive forms feature and i put my codes below (HTML)

<ion-list class="items-middle" text-center>
        <!-- use the [formGroup] directive to tell Angular that we want to use the registrationForm as the "FormGroup" for this form: -->
        <form [formGroup]="registrationForm">
            <ion-item>
                <ion-label color="ligh-grey" floating>Full Name</ion-label>
                <ion-input type="text" formControlName="userName"></ion-input>
                <div style="color: red; padding-top: 0.2rem" *ngIf="registrationForm.hasError('required', 'userName')">
                </div>
            </ion-item>
            <ion-item>
                <ion-label color="ligh-grey" floating>Email</ion-label>
                <ion-input type="email" formControlName="email"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label color="ligh-grey" floating>Date of Birth</ion-label>
                <ion-input type="text" formControlName="dob"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label color="ligh-grey" floating>Phone Number</ion-label>
                <ion-input type="number" formControlName="phone" pattern="[0-9]*"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label color="ligh-grey" floating>Address</ion-label>
                <ion-input type="text" formControlName="address"></ion-input>
            </ion-item>
            <ion-item class="job_status">
                <ion-label color="ligh-grey" floating>Job Status (Position)</ion-label>
                <ion-input type="text" formControlName="jobStatus"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label>Job Sector</ion-label>
                <ion-select formControlName="jobSectore">
                    <ion-option value="f">Government</ion-option>
                    <ion-option value="m">Private</ion-option>
                </ion-select>
            </ion-item>
            <input type="checkbox" formControlName="isTosRead">
            <!-- We can check if our form is valid: -->
            <ion-buttons padding-top>
                <button ion-button full round type="submit" [disabled]="!registrationForm.valid" (click)="regForm()">SIGNUP</button>
            </ion-buttons>
        </form>
        <pre> {{registrationForm.value | json }}</pre>
    </ion-list>

And this is my TS file

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@IonicPage()
@Component({
  selector: 'page-registration',
  templateUrl: 'registration.html',
})
export class RegistrationPage {

    registrationForm: FormGroup;

    constructor(public navCtrl: NavController, public navParams: NavParams) {
        this.registrationForm = new FormGroup({
        userName: new FormControl('', [Validators.required, Validators.minLength(2), Validators.pattern('^[a-zA-Z]+$')]),
        email: new FormControl('', [Validators.required, Validators.email, Validators.minLength(4)]),
        dob: new FormControl('', [Validators.required, Validators.minLength(4)]),
        phone: new FormControl('', [Validators.required, Validators.minLength(9), Validators.maxLength(10)]),
        address: new FormControl('', [Validators.required, Validators.minLength(9), Validators.maxLength(255)]),
        jobStatus: new FormControl('', [Validators.required, Validators.minLength(2), Validators.maxLength(50)]),
        jobSectore: new FormControl('', [Validators.required]),
        isTosRead: new FormControl(false, [Validators.requiredTrue])
        })
    }
}

This form show color validation when input is write or wrong, but i need show readable error message to the user i need to know how can i archive it. I used this code <div style="color: red; padding-top: 0.2rem" *ngIf="registrationForm.hasError('required', 'userName')"> </div> to show some errors but it is not worked donā€™t know why.
Please help me easy way to do this?
Thank you

2

See:

1 Like
3

I figure out my problem i was put div tag inside the ion-item tag :slight_smile: when i placed div outside of the ion-item tag it is works like charm. :hugs:

4

See: https://robferguson.org/blog/2017/11/20/ionic-3-and-forms-part-2/

We can check if a specific field is valid:

<div *ngIf="!credentialsForm.controls.email.valid &&
    credentialsForm.controls.email.dirty"
    class="validator-error">
  Please enter a valid email.
</div>

If you assign multiple validators to a FormControl, you can use the hasError() method to determine which validator failed:

<div *ngIf="credentialsForm.controls.password.hasError('pattern')">
  Passwords should be at least 8 characters long and contain one number,
  one character and one special character.
</div>
1 Like
5

Well this worked for me for iOS:

//-- Validation failed
ion-item.ion-invalid.ion-touched{
       border-bottom: 2px solid var(--ion-color-danger) !important;
}

//-- Validation passed
ion-item.ion-valid.ion-touched{
    border-bottom: 2px solid var(--ion-color-success) !important;
}