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);的值就会变成空的{"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”，并输出。

这是一个令人难以置信的工作示例。

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

提交表单编辑值ngForm

1 个答案: