如何使用 FormControl 修补值答案

【问题标题】：How can I patchValue with FormControl如何使用 FormControl 修补值
【发布时间】：2021-02-12 02:13:41
【问题描述】：

我需要在这个 formControl 中从 Api 修补Value

“.html”

`<p-dialog header="แก้ไขห้องพัก" [(visible)]="displayEdit" [modal]=true [style]="{width: '30vw'}"><div class="row" [formGroup]="edtForm">
  <input pInputText type="hidden" formControlName="id_room" [attr.disabled]="true">
  <input pInputText type="hidden" formControlName="id_roomDetail" [attr.disabled]="true">
  <input pInputText type="hidden" formControlName="homestayID" [attr.disabled]="true">
  <div class="col-5 text-right">เลขที่ห้อง :</div>
  <div class="col-7"><input pInputText type="text" formControlName="numRoom" [attr.disabled]="true"></div>
  <div class="col-5 text-right">Name :</div>
  <div class="col-7">
  <p-dropdown id="homestayName" formControlName="homestayName" [options]="homestays"></p-dropdown>
 </div>
</p-dialog>`

“.ts”

this.roomService.queryRoomById(id).subscribe((res) => {
    const data = {
      ...res
    };
    this.edtForm.patchValue(data);
  });

服务是

queryRoomById(id: string) {
return this.http.get<Rooms>('http://localhost/taladnoi/api/api_getRoomAdmin.php?id=' + id);

}

【问题讨论】：

补丁值与控件名称匹配。检查 api 中的属性名称是否与您的表单相同

标签： angular angular-reactive-forms form-control

【解决方案1】：

我们不知道您的 API 返回什么，但表单上的补丁只是更新表单部分的值。

我看到你有几个表单控件：

id_room
id_roomDetail
寄宿家庭ID
numRoom
寄宿家庭名称

假设你想更新numRoom 字段，你会做类似这样的事情：

this.formName.pathValue({ numRoom: newValue });

【讨论】：