更新

Question

我正在尝试提交同时具有隐藏和非隐藏表单字段的表单。

我的组件HTML如下：

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

在提交此表单的POST正文时，我进入的组件类为{"name":"bla bla"}，但我希望POST正文数据为{"name":"bla bla", "endPointType":"something"}，我的代码有什么问题？

Answer 1

您需要在控制器中添加endPointType的默认值，以避免出现此问题。

原因：working example

如果您按原样发送值，则其背后的原因是从提交方法中获得的，其中包含endPointType作为undefined的值。完全如示例所示记录。

{endPointType: undefined, name: "fsdfsd"}

但是，当您将数据发送到服务器时，您是通过将其解析为Stringify来发送数据的。删除了所有值为undefined的键结果将是-

"{name: 'fsdfsd'}"

更新

要设置默认值，只需像这样初始化变量-

export class yourClassName {
...
endPointType = 'WAVEFRONT'
...
}

并在将数据发送到服务器时使用-

{endPointType: this.endPointType, name: "fsdfsd"}

提交隐藏的以及非隐藏的表单字段

1 个答案:

更新