Value in input field will not display if I set ngControl

Ionic Framework ionic-v3
1

When I set ngControl in Ion-input the value will not display, but value will display without ngControl

Assuming email value=abcdefg123@abc.com

Example 1:

<ion-item>
      <ion-label stacked>Email:</ion-label>
      <ion-input type="email" value="{{data.email}}" >
      </ion-input>
</ion-item>

UI Display

Email:
abcdefg123@abc.com

Example 2:

 <ion-item>
      <ion-label stacked>Email: </ion-label>
      <ion-input type="email" value="{{data.email}}" ngControl="email">
      </ion-input>
 </ion-item>

UI Display

Email:
<empty>

Appreciate if anybody able to advise.

2

Hi, probably you should try:
[(ngModel)]="data.email"
instead of the “value” attribute

2 Likes
3

You could either do something like this:

<ion-input type="email" [(ngModel)]="email">

and then set this.email in the class definition. Or if you want to use Form Builder with ngControl it would look more like this:

<form [ngFormModel]="myForm" (submit)="saveForm()">

	<ion-item>
	      <ion-label stacked>Email:</ion-label>
	      <ion-input type="email" ngControl="email"></ion-input>
	</ion-item>

</form>

and in your classes constructor:

    this.myForm = formBuilder.group({
      email: ['initial value goes here']
    });

You’ll also need to make sure you import Form Builder:

import {FormBuilder, Validators} from 'angular2/common';

and inject it into your constructor:

static get parameters() {
  return [[FormBuilder]];
}

constructor(formBuilder) {
//..snip
}
4

Thanks joshmorony.

It is working fine now.