在Angular中以反应形式更改隐藏字段的值答案

【问题标题】：Changing the value of a hidden field in a reactive form in Angular在Angular中以反应形式更改隐藏字段的值
【发布时间】：2020-07-15 04:13:30
【问题描述】：

我有一个响应式表单，它在几个不同的场景中具有相同的（两个）输入文本字段。当用户从列表中选择场景选项时，会显示表单，并且该表单中的隐藏字段会更新为所选场景的关键字，例如

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

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

我在这里缺少关于反应形式的哪些内容？

谢谢/汤姆

【问题讨论】：

1.我倾向于通过 Angular 的 http 服务发送表单数据。 2. 您可以随时在代码隐藏中设置表单控件的值。
值 -> ngModel：[ngModel]="theaction"。这将导致表单接收要提交的“theaction”的最新值。
你能发布如何更新隐藏字段吗？
谢谢 Z.B - ngModel 是我的关键。干杯/汤姆
感谢您的关注。我现在使用： this.person.patchValue({ theaction: 'edit' }); （其中“人”是表单组）

标签： forms angular

【解决方案1】：

我最近需要在响应式表单（例如 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>

【讨论】：