forms - 在 Angular 中以 react 形式更改隐藏字段的值

Question

我有一个响应式表单，它具有相同的(两个)输入文本字段，适用于几种不同的场景。当用户从列表中选择场景选项时，将显示表单，并使用所选场景的关键字更新该表单中的隐藏字段，例如

<input formControlName="action" type="hidden" value="{{theaction}}">

我的问题是，虽然该字段正在更新(即我可以在显示代码中看到它)，但提交时该值似乎并未绑定(bind)到表单(即该字段在到达服务器时为空).

我在这里遗漏了什么响应式(Reactive)形式？

谢谢/汤姆

Answer 1

我最近需要包含有关 react 形式的信息(例如 id)，我的数据模型的某些属性不应在 UI 上公开。我创建了一个 FormControl对于属性，它允许我存储和操作值，但我没有创建相应的 <input>在模板中。工作起来很有魅力。例如

profileForm = this.fb.group({
  id: [null],                              //hidden field
  firstName: ['', Validators.required],
  lastName: ['']
});

在模板中

<form [formGroup]="profileForm">

  First Name: <input type="text" formControlName="firstName" />

  Last Name:  <input type="text" formControlName="lastName" />

  [...]

</form>