Angular2 - How to set the ngModel value as the input's value

Question

Component:

export class AccountComponent implements OnInit {
  public error: any;
  currentUser = {};

  constructor(private afService: AF) {
    afService.getCurrentUserInfo().then(currentUserDetails => {
      this.currentUser = currentUserDetails;
    });
  }

  updateUserEntry(fname, lname, phone, bio) {

    this.afService.getCurrentUserInfo().then((user) => {
      let details = [];
      details.push(user);
      console.log(details[0].userID);
      this.afService.updateUserEntry(details[0].userID, fname, lname, phone, bio).then(() => {
        console.log("Updated entry");
      })
      .catch((error) => {
        this.error = error;
        console.log("error");
      });
    });
  }

  ngOnInit() {
  }

}

Form:

<form>
        <dl class="form-group">
          <dt><label>First Name</label></dt>
          <dd><input [(ngModel)]="currentUser.firstName" name="fname" class="form-control" type="text"></dd>
        </dl>

        <dl class="form-group">
          <dt><label>Last Name</label></dt>
          <dd><input [(ngModel)]="currentUser.lastName" name="lname" class="form-control" type="text"></dd>
        </dl>

        <dl class="form-group">
          <dt><label>Email</label></dt>
          <dd><input [(ngModel)]="currentUser.email" name="email" class="form-control" type="email" disabled></dd>
        </dl>

        <dl class="form-group">
          <dt><label>Mobile Phone</label></dt>
          <dd><input [(ngModel)]="currentUser.phone" name="phone" class="form-control" type="text"></dd>
        </dl>

        <dl class="form-group">
          <dt><label>Bio</label></dt>
          <dd>
            <textarea [(ngModel)]="currentUser.bio" name="bio" class="form-control"></textarea>
          </dd>
        </dl>

        <div class="form-actions">
          <button type="button" class="btn btn-primary" (click)="updateUserEntry(fname, lname, phone, bio)">Save changes</button>
        </div>
      </form>

The function updates a JSON record. For example it updates the "firstName:" entry with the "fname" ngModel. The problem is, the ngModel is read as null unless the user modifies value of the input, even though a value already exists with value="{{ currentUser.firstName }}".

How can I set the ngModel to interpret it's value from the actual input's value=""?

Have you tried to do it in component: this.fname = this.currentUser.firstName? (You can take out value). — developer033
Yeah, I get an error firstName does not exist on type '{}' — Joe Berthelot
It is typescript error, that gets resolved if you set proper type to currentUser or atleast set type any. public currentUser: any; — Vamshi

Vamshi Vamshi · Accepted Answer · 2017-06-12T03:28:55

You need not use different variable such as fname , directly pass currentUser.firstName for ngModel.

<input 
  type="text"
  [(ngModel)]="currentUser.firstName" 
  name="fname" 
  class="form-control">

But if my understanding is wrong and you want to initialize fname with currentUser.firstName then do that in the component.

this.fname = currentUser.firstName

and in html

 <input 
      type="text"
      [(ngModel)]="fname" 
      name="fname" 
      class="form-control">

Dont use both ngModel and value at the same time they are contradicting in case of text type (check comment below) .

Update after complete code snippet

To make your current code working do these changes :

give type to currentUser like

public currentUser:any = {};

Remove params in updateUserEntry , but get the value from this.currentUser

this.afService.updateUserEntry(
    details[0].userID, 
    this.currentUser.fname,
    this.currentUser.lname,
    this.currentUser.phone, 
    this.currentUser.bio)

Better way

But I believe you are complicating it . In my opinion never use ngModel unless you need two way data binding. Instead use FormGroup Example from thoughtram

Angular2 - How to set the ngModel value as the input's value

1 Answers