Reactive Forms - 如何只获取当前视图中的值？

Question

在模板驱动的方法中，我可以：

<form #templateDrivenForm="ngForm" (ngSubmit)="submitForm(templateDrivenForm.value)>
  <input name="input1" ngModel="value1" /> 
  <input *ngIf="false" name="input2" ngModel="value2"/> 
</form

它只会传递 { input1: "value1" }，因为这是表单在模板中的唯一输入。

如何在反应式方法中完成同样的事情？

如果我有：

var reactiveForm = this.formBuilder.group({
  input1: ['value1'],
  input2: ['value2']
})

如果 input2 上有 *ngIf="false"，我需要一个简单的方法来获取 { input1: "value1" }。

我希望我不必在将这些值传递给 API 之前手动删除这些值。

Answer 1

如 docs

所述

For an enabled FormGroup, the values of enabled controls as an object with a key-value pair for each member of the group.

我们可以利用此功能来实现您的用例。当您使用 ngIf 隐藏输入时，您可以同时禁用与输入关联的 formControl。因此，当您提交表单时，FormGroup.value 将为仅启用的可见控件提供 return 值。

这是一个简单的演示：
https://stackblitz.com/edit/angular-uivptc

Reactive Forms - 如何只获取当前视图中的值？

Reactive Forms - how to only get the values that are currently in the view?

angular

angular-reactive-forms