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

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>

I am able to pass eat1 and eat2 as expected, but don't see name .

Here's the output:

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

Should be:

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

These didn't work:

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

Answer 1

You can set the value to the ngModel attribute and it should work:

Had created a Stackblitz Demo for your reference.

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

Answer 2

Remove value attribute and set ngModel={{your_value}} because you are using ngModel and value at a time:

HTML Code:

<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

try a hidden input:

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

Hope this will work for

Answer 4

javascript doesn't include elements that're hidden.

what you should to is to serialize the form , then append the hidden element to the resultant object.

note that this is in javascript, apply this concept to Angular

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

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