CODEWITHSUNDEEP
angulartypescriptangular-forms
Asridh Kumar
Asridh Kumar

Reputation: 525

Using both value and ngModel for an input field not working?

This concept is about user profile. I want to assign a value(userData.email_id) coming from api using [value] attribute of input and upon changes i want to get data back to TS using ngModel into email_id property.

Here i am failing to assign value to input using [value]. Suggest me the solution.

Note: Here userData.email_id is coming from server.

TS:

 email_id: string;

html:

          <mat-form-field>
                <input
                  type="text"
                  placeholder="Email"
                  matInput
                  [(ngModel)]="email_id"
                  [value]="userData.email_id"
                  name="uEmail"                     
                />
              </mat-form-field>

Upvotes: 1

Views: 1436

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222522

You could directly use [(ngModel)] and set the value to that, and get the changes via ngModelChange as follows , hence remove [value]

<mat-form-field>
                <input
                  type="text"
                  placeholder="Email"
                  matInput
                  [(ngModel)]="userData.email_id"
                  (ngModelChange)="sendData(userData)"
                  name="uEmail"                     
                />
</mat-form-field>

EDIT

If you do not want to handle this in each field, you could create a button to send all your changes to server by following way,

<button (click)="sendData(userData)"></button>

In this case you do not need ngModelChange on each input

Upvotes: 2

Related Questions