提交表單編輯值ngForm

Question

我正在嘗試在已初始化的表單字段中提交具有某些默認值的表單。 我的HTML代碼如下所示：

<form #updateEndpointForm="ngForm" (ngSubmit)="updateEndpoint(updateEndpointForm);">
            <section class="form-block">
                <div class="form-group">
                    <input type="text" placeholder="id" name="id" [value]="updateEndpointData?.id" [hidden]="true" ngModel required>
                </div>
                <div class="form-group">
                    <label for="endPointType">Endpoint Type</label>
                    <input type="text" placeholder="Endpoint Type" name="endPointType" [value]="updateEndpointData?.endPointType" ngModel required readonly>
                </div>
                <div class="form-group">
                    <label for="name">Endpoint Name</label>
                    <input type="text" placeholder="Endpoint Name" name="name" [value]="updateEndpointData?.name" ngModel required>
                </div>
            </section>
            <button type="submit" class="btn btn-primary">ADD</button>
        </form>

在HTML頁面上，我能夠在UI中顯示的相應字段中獲取數據。 我在這里面臨的問題是：每當我提交表單時， console.log(updateEndpointForm.value);的值console.log(updateEndpointForm.value); 作為空的{"id":"","name":"","endPointType":""} 。 只有我實際修改的字段隨數據一起提供。 我想要從updateEndpointForm獲得的所有值如何獲得它？ 編輯：我不想使用兩種方式綁定[(ngModel)] 。

Answer 1

這是使用雙向數據綁定的有效解決方案，

HTML文件，

<form #updateEndpointForm="ngForm" (ngSubmit)="updateEndpoint(updateEndpointForm);">
  <section class="form-block">
      <div class="form-group">
          <label for="endPointType">Id</label>        
          <input type="text" placeholder="id" name="id"  [hidden]="true" [(ngModel)]="updateEndpointData.id" required>
      </div>
      <div class="form-group">
          <label for="endPointType">Endpoint Type</label>
          <input type="text" placeholder="Endpoint Type" name="endPointType" [(ngModel)]="updateEndpointData.endPointType" required readonly>
      </div>
      <div class="form-group">
          <label for="name">Endpoint Name</label>
          <input type="text" placeholder="Endpoint Name" name="name" [(ngModel)]="updateEndpointData.name" required>
      </div>
  </section>
  <button type="submit" class="btn btn-primary">ADD</button>
</form>

打字稿文件

//here iam declared sample variable with data
public updateEndpointData:any={"id":1,"name":"Muthu","endPointType":"test"};

updateEndpoint(data){
    console.log("form data",data.value);
}

輸出屏幕快照，請注意，iam聲明了變量值“ Muthu”，運行時iam更改了“ Muthukumar”，並輸出了。

這是一個stackblitz工作示例。

https://stackblitz.com/edit/angular-2mqjyk