Как передать скрытое значение в форме?

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={{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

Answer 2

Вы можете установить значение для атрибута ngModel, и оно должно работать:

Создал Stackblitz Demo для вашей справки.

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

Answer 3

JavaScript не содержит скрытых элементов.

Вам нужно сериализовать форму , а затем добавить скрытый элемент к результирующемуobject.

обратите внимание, что это в javascript, примените эту концепцию к Angular

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

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

Answer 4

попробуйте скрытый ввод:

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

Надеюсь, это будет работать для