Question

我对棱角分明并尝试添加表格非常陌生。我在组件类中使用ngForm：

组件类方法：

public addEndpoint(endpointForm: NgForm){
  this.endpointService.addEndpoint(endpointForm.value).subscribe(res => {  });
}

组件HTML：

<div class="form-group">
    <label for="name">Endpoint Name</label>
    <input type="text" placeholder="Endpoint Name" name="name" [(ngModel)]="name" required>
</div>
<div class="form-group">
    <label for="wavefrontInstance">Wavefront Host/IP</label>
    <input type="text" placeholder="https://0.0.0.0" name="wavefrontInstance" [(ngModel)]="wavefrontInstance" required>
</div>
<div class="for-group">
    <label for="waveFrontProxyPort">Wavefront Proxy Port</label>
    <input type="number" placeholder="2878" name="waveFrontProxyPort" [(ngModel)]="waveFrontProxyPort" required>
</div>

POST正文输出：

{
  "name": "string",
  "wavefrontInstance": "string",
  "waveFrontProxyPort": "string"
}

我的POST请求失败，因为帖子正文的格式不正确。

我想获取如下形式的POST正文输出：

{
  "name": "string",
  "connection": {
    "wavefrontInstance": "string",
    "waveFrontProxyPort": "string"
  }
}

为此，我将当前的html组件修改为：

<div class="form-group">
    <label for="name">Endpoint Name</label>
    <input type="text" placeholder="Endpoint Name" name="name" [(ngModel)]="name" required>
</div>
<div class="form-group">
    <label for="connection.wavefrontInstance">Wavefront Host/IP</label>
    <input type="text" placeholder="https://0.0.0.0" name="connection.wavefrontInstance" [(ngModel)]="connection.wavefrontInstance" required>
</div>
<div class="for-group">
    <label for="connection.waveFrontProxyPort">Wavefront Proxy Port</label>
    <input type="number" placeholder="2878" name="connection.waveFrontProxyPort" [(ngModel)]="connection.waveFrontProxyPort" required>
</div>

我遇到的错误是：ERROR TypeError: Cannot read property 'wavefrontInstance' of undefined

我看了很多例子，但是我发现它们是通过实现模型类实现的，我不想为连接道具实现任何模型类。即使我也不想修改组件类方法。我只想要HTML中的一些解决方案，以获取正确的JSON对象。我们有办法吗？

Answer 1

我能够使用fieldset解决该问题，并按如下所示修改了HTML并成功了！

<fieldset ngModelGroup="connection">
<div class="form-group">
    <label for="name">Endpoint Name</label>
    <input type="text" placeholder="Endpoint Name" name="name" [(ngModel)]="name" required>
</div>
<div class="form-group">
    <label for="wavefrontInstance">Wavefront Host/IP</label>
    <input type="text" placeholder="https://0.0.0.0" name="wavefrontInstance" [(ngModel)]="wavefrontInstance" required>
</div>
<div class="for-group">
    <label for="waveFrontProxyPort">Wavefront Proxy Port</label>
    <input type="number" placeholder="2878" name="waveFrontProxyPort" [(ngModel)]="waveFrontProxyPort" required>
</div>
</fieldset>

Answer 2

您必须使用jQuery('#test2').on('input', function() { // do your stuff });并删除“连接”。通过输入名称标签。

ngModelGroup

PS：这已经被问了一段时间了。希望它能帮助某个卡住的人。

角度组件HTML

2 个答案: