# Show error messages when form validation

**URL:** <https://forum.ionicframework.com/t/show-error-messages-when-form-validation/141804>\
**Category:** ionic-v3\
**Created:** [September 15, 2018, 6:44am UTC](https://forum.ionicframework.com/t/show-error-messages-when-form-validation/141804 "2018-09-15T06:44:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![sahanpasindu](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sahanpasindu/32/119285_2.png) [@sahanpasindu](https://forum.ionicframework.com/u/sahanpasindu)\
**Post date:** [September 15, 2018, 6:44am UTC](https://forum.ionicframework.com/t/show-error-messages-when-form-validation/141804/1 "2018-09-15T06:44:10Z")

</div>

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)

```auto
<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

```auto
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

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [September 15, 2018, 10:15am UTC](https://forum.ionicframework.com/t/show-error-messages-when-form-validation/141804/2 "2018-09-15T10:15:51Z")

</div>

See:

- [http://www.deanpdx.com/2018/02/04/angular-5-forms-dynamic-validation-summary.html](http://www.deanpdx.com/2018/02/04/angular-5-forms-dynamic-validation-summary.html)
- [https://toddmotto.com/angular-ng-errors-form-validation](https://toddmotto.com/angular-ng-errors-form-validation)
- [https://angular-templates.io/tutorials/about/angular-forms-and-validations](https://angular-templates.io/tutorials/about/angular-forms-and-validations)

---

<div class="post-metadata">

**Author:** ![sahanpasindu](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sahanpasindu/32/119285_2.png) [@sahanpasindu](https://forum.ionicframework.com/u/sahanpasindu)\
**Post date:** [September 16, 2018, 2:27pm UTC](https://forum.ionicframework.com/t/show-error-messages-when-form-validation/141804/3 "2018-09-16T14:27:36Z")

</div>

> [@sahanpasindu](#):
>
> \<div style=“color: red; padding-top: 0.2rem” \*ngIf=“registrationForm.hasError(‘required’, ‘userName’)”\> \</div\>

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

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [September 16, 2018, 8:33pm UTC](https://forum.ionicframework.com/t/show-error-messages-when-form-validation/141804/4 "2018-09-16T20:33:57Z")

</div>

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

We can check if a specific field is valid:

```auto
<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:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![shashankkulkarni](https://avatars.discourse-cdn.com/v4/letter/s/74df32/32.png) [@shashankkulkarni](https://forum.ionicframework.com/u/shashankkulkarni)\
**Post date:** [August 26, 2019, 7:26pm UTC](https://forum.ionicframework.com/t/show-error-messages-when-form-validation/141804/5 "2019-08-26T19:26:28Z")

</div>

Well this worked for me for iOS:

```auto
//-- 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;
}

```

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:16pm UTC](https://forum.ionicframework.com/t/show-error-messages-when-form-validation/141804/6 "2021-07-19T21:16:35Z")

</div>

Closed on July 19, 2021, 9:16pm UTC