Angular 6 and Ionic 3 reactive form validation error not display

Question

I am working on a project which uses the latest version of Angular and Ionic. I am working on a registration page. I need to display some error when the form input is not valid. I am using Angular Reactive form in my project but if I check error on the page it is not displayed. It only shows red color underline but I need to show some readable errors

Here is my View code

<ion-content padding>
  <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 floating>Full Name</ion-label>
        <ion-input type="text" formControlName="userName"></ion-input>
        <div *ngIf="!registrationForm.controls['userName'].valid && registrationForm.controls['userName'].touched"> name is required</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">SIGNUP</button>
      </ion-buttons>
    </form>
    <pre> {{registrationForm.status}}</pre>
    <pre> {{registrationForm.value | json }}</pre>
  </ion-list>
</ion-content>

And this is my TS file

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

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

  registrationForm: FormGroup;
  userName: string;

  constructor(public navCtrl: NavController, public navParams: NavParams, private fb: FormBuilder) {
    // 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.registrationForm = this.fb.group({
      'userName': [null, Validators.compose([Validators.pattern('^[a-zA-Z]+$'), Validators.required])]
    });
  }
}

What exactly is the wrong here? Why am I not getting the *ngIf condition, console doesn't show me any error.

I think you have cover both condition in single one like *ngIf="!(registrationForm.controls['userName'].valid && registrationForm.controls['userName'].touched)" — Paresh Gami
– Paresh Gami, Commented Sep 16, 2018 at 13:26
@SahanPasinduNirmal since you had touched on the field with && condition, you have to touch the field to see error. — Pankaj Parkar
– Pankaj Parkar, Commented Sep 16, 2018 at 13:29
registrationForm.get('userName') should return the formControl to you — SiddAjmera
– SiddAjmera, Commented Sep 16, 2018 at 13:29

Sajeetharan · Accepted Answer · 2018-09-16 13:42:29Z

3

Try changing the condition as follows,

this.registrationForm = this.fb.group({
      userName: [
        null, Validators.compose([Validators.maxLength(30), Validators.pattern('^[a-zA-Z]+$'), Validators.required])
      ],

EDIT

Also change your template as follows,

<ion-item *ngIf="!registrationForm .controls.userName.valid && (registrationForm .controls.userName.dirty)"> <p>Please enter a valid name.</p> </ion-item>

edited Sep 16, 2018 at 13:42

answered Sep 16, 2018 at 13:31

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

Sahan Pasindu Nirmal Over a year ago

Thank you for your effort and kind consideration sir, but it show me the same output, no any text based visual error. :(

Sajeetharan Over a year ago

oh! just try with this <ion-item *ngIf="!registrationForm .controls.userName.valid && (registrationForm .controls.userName.dirty)"> <p>Please enter a valid name.</p> </ion-item>

Sajeetharan Over a year ago

@PankajParkar yeah you are right! the only difference here is i have used dot operation instead of OPs way. using touched would still work

Sajeetharan Over a year ago

@SahanPasinduNirmal yeah that is another mistake here. you should use condition on ion item instead

Sahan Pasindu Nirmal Over a year ago

@PankajParkar yes there is no difference and both ways are working

|

SiddAjmera · Accepted Answer · 2018-09-16 13:48:08Z

1

You'll have to add the error message div outside the ion-item tag like this:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list class="items-middle" text-center>
    <form [formGroup]="registrationForm">
      <ion-item>
        <ion-label floating>Full Name</ion-label>
        <ion-input type="text" formControlName="userName"></ion-input>
      </ion-item>
      <div *ngIf="registrationForm.get('userName').touched && registrationForm.get('userName').invalid"> name is required</div>
      <ion-buttons padding-top>
        <button ion-button full round type="submit" [disabled]="!registrationForm.valid">SIGNUP</button>
      </ion-buttons>
    </form>
    <pre> {{registrationForm.status}}</pre>
    <pre> {{registrationForm.value | json }}</pre>
    <pre> {{registrationForm.get('userName').invalid | json }}</pre>
    <pre> {{registrationForm.get('userName').touched | json }}</pre>
  </ion-list>
</ion-content>

Also, you can simply use registrationForm.get('userName').touched && registrationForm.get('userName').invalid">

Here's a Sample StackBlitz.

answered Sep 16, 2018 at 13:48

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

5 Comments

Sahan Pasindu Nirmal Over a year ago

Thank you your code also worked to me sir, my wrong is put div tag inside the <ion-item> tag?

SiddAjmera Over a year ago

Yeah, I guess. And I'd use registrationForm.get('userName') instead of using registrationForm.controls['userName'].

Sahan Pasindu Nirmal Over a year ago

Sir, any special of .get() method?

SiddAjmera Over a year ago

You might want to read this for that: stackoverflow.com/a/49643393/2622292

Sahan Pasindu Nirmal Over a year ago

help a lot sir.

Shashikant Devani · Accepted Answer · 2018-09-16 14:16:46Z

1

Add <span> tag with your formControl like this :

OR Add class="text-danger" in your current <div>.

.html file.

Display required Error Message

<span class="text-danger" *ngIf="registrationForm.controls['userName'].hasError('required') && (registrationForm.controls['userName'].dirty || registrationForm.controls['userName'].touched)">Field is required</span>

Display pattern Error Message

<span class="text-danger" *ngIf="registrationForm.controls['userName'].hasError('pattern') && (registrationForm.controls['userName'].dirty || registrationForm.controls['userName'].touched)">Enter valid username.</span>

ts file.

this.registrationForm = this.fb.group({
  'userName': [null, Validators.compose([Validators.pattern('^[a-zA-Z]+$'), Validators.required])]
});

edited Sep 16, 2018 at 14:16

answered Sep 16, 2018 at 13:42

Shashikant Devani

2,4641 gold badge15 silver badges29 bronze badges

10 Comments

Sahan Pasindu Nirmal Over a year ago

Thank you for your effort and kind consideration sir, but it result is same

Shashikant Devani Over a year ago

Use p tag instead of span tag.

Sahan Pasindu Nirmal Over a year ago

no brother here is problem i have not set control object name like this => "!registrationForm.controls.userName.valid" now it is working

Shashikant Devani Over a year ago

Okk that's great.

Shashikant Devani Over a year ago

!registrationForm.controls.userName.valid is really works. But if you want to display different different error message than try my given answer. Ex. In your case. You have two validation for same Control. Like pattern and required. You can use like hasError('pattern') and hasError('required').

|

Collectives™ on Stack Overflow

Angular 6 and Ionic 3 reactive form validation error not display

3 Answers 3

19 Comments

5 Comments

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

19 Comments

5 Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related