Ionic 4 value="" attribute not returning any data

#1

I have a profile Edit form where am passing user details from an api into using the html value="{{a.firstname}}". when i click on submit button am getting “undefined” for all the fields.

please help.

bellow is the form:

<form [formGroup]=“updateForm” (ngSubmit)=“saveForm(updateForm.value)”>

<div *ngFor=“let d of profile”>

<div align=“center” style=“background-color: #3880ff; padding: 50px; color: white;”>

<!-- <ion-icon name=“add” style=“padding: 30px; border-radius: 100px; background-color: white; color: #3880ff;”></ion-icon>–>

<h6><b>Change Profile Image</b></h6>

</div>

<ion-list-header color=“primary”><h4><b>Edit Information</b></h4></ion-list-header>

<ion-item>

<ion-label position=“floating”>First Name</ion-label>

<ion-input type=“text” formControlName=“firstname” value="{{d.firstname}}"></ion-input>

<div class=“error-box” ngIf=“firstnameRequired”> firstname is required!</div>

<div class=“error-box” ngIf=“firstnameValid”> Valid firstname is required!</div>

</ion-item>

<ion-item>

<ion-label position=“floating”>Last Name</ion-label>

<ion-input type=“text” formControlName=“lastname” clearInput value="{{d.lastname}}"></ion-input>

<div class=“error-box” ngIf=“lastnameRequired”> lastname is required!</div>

<div class=“error-box” ngIf=“lastnameValid”> Valid lastname is required!</div>

</ion-item>

<ion-item>

<ion-label position=“floating”>E-Mail</ion-label>

<ion-input type=“email” formControlName=“email” clearInput value="{{d.email}}"></ion-input>

<div class=“error-box” ngIf=“emailRequired”> Email ID is required!</div>

<div class=“error-box” ngIf=“emailValid”> Valid Email ID is required!</div>

</ion-item>

<ion-item>

<ion-label position=“floating”>Phone</ion-label>

<ion-input type=“number"formControlName=“phone” clearInput value=”{{d.phone}}"></ion-input>

</ion-item>

<ion-item>

<ion-label position=“floating”>Country</ion-label>

<ion-select formControlName=“country” clearInput placeholder="–select country–" >

<ion-select-option *ngFor=“let c of items” value="{{c.id}}">{{c.name}}</ion-select-option>

</ion-select>

</ion-item>

<ion-item>

<ion-label position=“floating”>About</ion-label>

<ion-input type=“text” formControlName=“about” clearInput value="{{d.about}}"></ion-input>

</ion-item>

<ion-button color=“primary” type=“submit” expand=“full” >Save Changes</ion-button>

</div>

</form>

#2

Put [(ngModel)] instead values .

#3

Thanks for the reply. did you mean i should do something like [(ngModel)] ="{{a.firsstname}}" ?

i tried its not working. please can you send me a working code?

#4

Can anyone help me out? problem still not solved

#5

[(ngModel)] = "a.firsstname"