CODEWITHSUNDEEP
angularionic-frameworkionic3
EMRADE
EMRADE

Reputation: 183

Ionic 3 FormControl Errors not displaying

my ionic form does not show if errors exist when an input is performed.

The HTML code looks like

<form [formGroup]="LoginForm" (ngSubmit)="loginUser(LoginForm.value)">

<ion-item>
  <ion-label floating >Email</ion-label>
  <ion-input type="email" formControlName="email"></ion-input>
  <div *ngIf="!LoginForm.controls.email.valid && LoginForm.controls.email.dirty">
   Please enter a valid email.
  </div>
</ion-item>

And the TS file looks like

constructor(public navCtrl: NavController, public navParams: NavParams, 
private toast: ToastServiceProvider, private formBuilder: FormBuilder) {

  this.LoginForm = formBuilder.group({
    email: ['', Validators.compose([Validators.minLength(1), Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])],
    password: ['', Validators.compose([Validators.minLength(6), Validators.required])],
  }) }

Can anyone please tell me what i am doing wrong?

Upvotes: 1

Views: 680

Answers (2)

AVJT82
AVJT82

Reputation: 73357

Whenever there is content inside ion-item that is not expected, you need to add item-content to the tag, so in your case.... 

<div item-content *ngIf="....">

But you really don't want to do it like that, since that will produce the error message right above the input: StackBlitz

Instead I would add the error message inside another ion-item below your form field:

<ion-item no-lines *ngIf="....">
  <p>Please enter a valid email</p>
</ion-item>

That produces a much nicer result: StackBlitz

Upvotes: 2

abbas-ak
abbas-ak

Reputation: 642

Add a name attribute to each form control.

<ion-input type="email" formControlName="email" name="somename"></ion-input>

Upvotes: 0

Related Questions