Question

<p>{{item.name}}</p>         // Please note that this works and shows fine
<form #f="ngForm" (ngSubmit)="onSubmit(f.value)" novalidate>
    <div *ngIf="editMode">
        <input name="name" type="hidden" ngModel value="{{item.name}}"> 
        <input name="eat1" type="text" ngModel > 
        <input name="eat2" type="text" ngModel >
        <button>Submit</button>
    </div>
</form>

我能够按预期通过eat1和eat2，但是看不到name。

以下是输出：

{name: "", eat1: "Bacon", eat2: "Egg"}

应该是：

{name: "Breakfast", eat1: "Bacon", eat2: "Egg"}

这些无效：

 <input name="name" type="hidden" ngModel value="item.name"> 
 <input name="name" type="hidden" ngModel value={{item.name}}>

Answer 1

您可以将值设置为ngModel属性，它应该可以工作：

已经创建了一个Stackblitz Demo供您参考。

 <input name="name" type="hidden" [ngModel]="item.name">

Answer 2

删除值属性并设置ngModel={{your_value}}，因为您一次使用ngModel和值：

HTML代码：

<form #f="ngForm" (ngSubmit)="onSubmit(f.value)" novalidate>
    <div *ngIf="editMode">
        <input name="name" type="hidden" ngModel="{{item.name}}"> 
        <input name="eat1" type="text" ngModel> 
        <input name="eat2" type="text" ngModel>
        <button>Submit</button>
    </div>
</form>

StackBlitz Example

Answer 3

尝试隐藏的输入：

<input type="hidden" value="some-thing" name="eat1" />

希望这适用于

Answer 4

javascript不包含隐藏的元素。

您应该做的是序列化表格，然后将隐藏的元素附加到生成的对象上。

请注意，这是在javascript中，将此概念应用于Angular

let obj = form.serializeArray(); // expected result: {name: "", eat1: "Bacon", eat2: "Egg"}

// update name key
obj['name'] = document.querySelector('input[name="name"]');

如何以表格形式传递隐藏值？

4 个答案: