如果没有任何字段的值,则跳过字段集

时间:2018-06-26 13:17:15

标签: angular typescript

我正在使用模板驱动的形式来传递组件类中的值。我的组件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本身进行一些修改。我该如何实现?

0 个答案:

没有答案