我正在使用模板驱动的形式来传递组件类中的值。我的组件HTML如下:
<form #endpointForm="ngForm" (ngSubmit)="addEndpoint(endpointForm);">
<div class="form-group">
<label for="name">Endpoint Name</label>
<input type="text" placeholder="Endpoint Name" name="name" [(ngModel)]="name">
</div>
<fieldset ngModelGroup="connection1">
<div class="form-group">
<label for="wavefrontInstance1">Wavefront Host/IP</label>
<input type="text" placeholder="https://0.0.0.0" name="wavefrontInstance1" [(ngModel)]="wavefrontInstance1">
</div>
<div class="for-group">
<label for="waveFrontProxyPort1">Wavefront Proxy Port</label>
<input type="number" placeholder="2878" name="waveFrontProxyPort1" [(ngModel)]="waveFrontProxyPort1">
</div>
</fieldset>
<fieldset ngModelGroup="connection2">
<div class="form-group">
<label for="wavefrontInstance2">Wavefront Host/IP</label>
<input type="text" placeholder="https://0.0.0.0" name="wavefrontInstance2" [(ngModel)]="wavefrontInstance2">
</div>
<div class="for-group">
<label for="waveFrontProxyPort2">Wavefront Proxy Port</label>
<input type="number" placeholder="2878" name="waveFrontProxyPort2" [(ngModel)]="waveFrontProxyPort2">
</div>
</fieldset>
<button type="submit" class="btn btn-primary">ADD</button>
</form>
组件服务:
public addEndpoint(endpointForm: NgForm){
this.endpointService.addEndpoint(endpointForm.value).subscribe(res => { });
}
在填写第一个字段集而不是第二个字段集的表单期间,提交后,我得到的POST数据为:{"name":"name1","connection1":{"wavefrontInstance1":"wavefrontInstance1","waveFrontProxyPort1":2878},"connection2":{}}
,而我希望提交的数据为{"name":"name1","connection1":{"wavefrontInstance1":"wavefrontInstance1","waveFrontProxyPort1":2878}}
。基本上,我想为那些填充了子数据的对象获取POST正文。我不希望在组件类中进行任何修改,而是希望对HTML本身进行一些修改。我该如何实现?