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

Question

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>

remove [value] and set the value of email_id as userData.email_id — CruelEngine
– CruelEngine, Commented Nov 17, 2018 at 5:24

Sajeetharan · Accepted Answer · 2018-11-17 05:50:46Z

2

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

edited Nov 17, 2018 at 5:50

answered Nov 17, 2018 at 5:24

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

4 Comments

Asridh Kumar Over a year ago

But the problem is i have around 12 fields in my form ?? Have i to use sendData () method for each field? I want automatically reflect changes into my ts file.

Sajeetharan Over a year ago

you do not have to use each field you can just send userData which is an object contains 12 fields

Asridh Kumar Over a year ago

wt exactly is the parameter userData inside sendData method?

Sajeetharan Over a year ago

userData is the object that you get from the server with the latest changes

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related