未从表单提交的动态值答案

【问题标题】：Dynamic values not submitted from form未从表单提交的动态值
【发布时间】：2018-12-22 19:21:02
【问题描述】：

我正在编写 Angular 代码。

如果我在表单字段中手动输入值并提交表单，我会得到组件函数中的所有值。

但如果我在value='{{detail_id}}' 之类的表单字段中动态显示值，则组件不会收集任何值。

组件函数

public updateSetting(obj:any) :any {
  console.log(obj);
}

模板

<form (ngSubmit)="updateSetting({'uname':uname, 'upwd':upwd, 'id':id})">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="text" [(ngModel)]='uname' name='uname' class="form-control" value='{{detail_uname}}'>
  </div>

  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" name='upwd' [(ngModel)]="upwd" class="form-control" value='{{detail_upwd}}'>
  </div>

  <input type="hidden" name="id" [(ngModel)]='id' class="form-control" value='{{detail_id}}'>

  <button type="submit" class="btn btn-default">Update</button>
</form>

值动态显示在表单字段上，点击列表中的查看按钮

列表上的按钮

<a (click) = "view({'id':x.id})">View</a>

【问题讨论】：

标签： angular forms

【解决方案1】：

你不需要使用 value，ngModel 是用来存储显示值的。

<input type="text" [(ngModel)]='detail_uname' name ='uname' class="form-control">
<input type="hidden" name="id" [(ngModel)] = 'detail_id' class="form-control">

请注意detail_id必须在ts端定义。

【讨论】：

【解决方案2】：

我不确定你为什么要使用价值，但是：

[value]="detail_uname"

【讨论】：

我正在使用 value 在表单上显示动态数据。
不要使用价值。请检查我的答案。
工作，使用 [value]="detail_uname" 后，我在提交中传递了 'detail_uname' 参数
它有效，但可能会破坏您的表单逻辑。如果 ngModel 发生变化怎么办？无论如何，你会明白我的意思是用艰难的方式:)
是的，它正在崩溃。通过使用上述逻辑得到表单值，但是当我修改表单值时，我得到的不是修改后的值而是旧值