代码之家  ›  专栏  ›  技术社区  ›  AmazingDayToday

如何在窗体中传递隐藏值?

  •  0
  • AmazingDayToday  · 技术社区  · 6 年前
    <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}}> 
    
    4 回复  |  直到 6 年前
        1
  •  2
  •   Prashant Pimpale Dila Gurung    6 年前

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

    创造了一个 Stackblitz Demo 供参考。

     <input name="name" type="hidden" [ngModel]="item.name"> 
    
        2
  •  2
  •   Prashant Pimpale Dila Gurung    6 年前

    移除值属性并设置 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

        3
  •  1
  •   An Nguyen    6 年前

    尝试隐藏输入:

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

    希望这对

        4
  •  0
  •   Kevin    6 年前

    javascript不包含隐藏的元素。

    你应该做的是 序列化窗体 ,然后附加 隐藏元素 到结果对象。

    注意这是在javascript中,将这个概念应用于角度

    let obj = form.serializeArray(); // expected result: {name: "", eat1: "Bacon", eat2: "Egg"}
    
    // update name key
    obj['name'] = document.querySelector('input[name="name"]');