以 Angular 形式获取自动填充的值不起作用

Question

我的项目中有一个模板驱动的 angular 表单。这是应用程序中的编辑个人资料部分。我正在为该表单填充 API 中的数据（如果没有数据，则字段为空）。如果用户为该字段键入新数据，我将获取这些数据和 post 到 API。它的工作没有任何问题。但是想想如果用户没有为某些字段打字并且他需要使用自动填充的数据。然后我想将 API 的自动填充数据获取到 post。但我没有让那些自动填充的值发送。这是我试过的。

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>

组件 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>

您正在使用双向数据绑定 shorthand 使用 [(ngModel)] 但您没有要绑定的 firstName。使用 profileData 对象中的 firstName 元素。

此外，您不需要使用 value，因为 [(ngModel)] 会处理它。

以 Angular 形式获取自动填充的值不起作用

Getting auto populated values in Angular form not working

angular

angular-forms