Getting auto populated values in Angular form not working

Question

I'm having a template driven angular form in my project. This is an Edit profile section in the app. I'm populating data from the API for that form (If there's no data ,fields are empty). If user types new data for that fields,I'm getting those data and post to API. It's working without any issues. But think if user isn't typing for some fields and he needs to use the auto populated data. Then I want to get that auto populated data to post for the API. But I'm not getting those auto populated values to send. This is what I tried.

HTML

    <div>
  <form #profileForm="ngForm" (ngSubmit)="sendUpdatedData(profileForm)">
    <div class="form-group">
      <label for="firstName">First Name</label>
      <input type="text" [(ngModel)]="firstName" class="form-control" name="firstName" placeholder="First Name" required
        value="{{profileData?.firstName}}">
    </div>

    <div class="form-group">
      <label for="lastName">Last Name</label>
      <input type="text" [(ngModel)]="lastName" class="form-control" name="lastName" placeholder="Last Name" required value="{{profileData?.lastName}}">
    </div>

    <div class="form-group">
      <label for="telephone">Telephone</label>
      <input type="text" [(ngModel)]="telephone" name="telephone" class="form-control" placeholder="Telephone" #teleph="ngModel"  maxlength="10" pattern="[0-9]+"
        value="{{profileData?.telephone}}">
    </div>

    <div class="form-group">
      <label for="mobilephone">Mobile Phone</label>
      <input type="text" [(ngModel)]="mobilephone" name="mobilephone" class="form-control" placeholder="Mobile Phone"  #mobileph="ngModel" maxlength="10" pattern="[0-9]+"
        value="{{profileData?.mobilePhone}}">
    </div>

    <button type="submit" class="btn btn-success mt-2" value="submit">UPDATE</button>

  </form>
</div>

Component TS

   ngOnInit() {
    this.getProfileData();
  }

  //Get data to auto populate fields.
  getProfileData(){
    this.profileId = localStorage.getItem('profileId' )
    return this.apiService.get("Users/id/"+ this.profileId ,true).subscribe(
      (data: any) => {   
        this.profileData= data;
      },
      error => {

      }
  );
  }

  //sending data when user clicks update button.
  sendUpdatedData(profileForm: any){

    let updatedData= {
      "id": this.userId,
      "firstName":  profileForm.value.firstName,
      "lastName": profileForm.value.lastName,
      "mobilePhone": profileForm.value.mobilephone,
      "telephone": profileForm.value.telephone,
      "organisation": profileForm.value.organisation
    }


   return this.apiService.patch("Users/update/", updatedData ,true).subscribe(
      (data: any) => {

        this.successMsg = "User data updated successfully";
      },
      (error)=>{
        this.isError = true;
        this.isSuccess = false;

        this.errMsg = error.errror.message;


      }
  );
  }
}

Answer 1

<input type="text" [(ngModel)]="profileData.firstName" 
class="form-control" name="firstName" placeholder="First Name" required>

You are using two-way data binding shorthand using [(ngModel)] but you do not have firstName to bind with. Use the firstName element in the profileData object.

Also, you do not need to use value as [(ngModel)] takes care of it.