在不使用 ngModel 的情况下与反应形式进行两种方式绑定答案

【问题标题】：Two way binding with reactive forms without using ngModel在不使用 ngModel 的情况下与反应形式进行两种方式绑定
【发布时间】：2020-02-01 06:48:58
【问题描述】：

我有很多输入需要验证。所以我使用反应形式来验证它们。例如，

<input formControlName="testName">

在构造函数中我定义了嵌套表单。

constructor(private fb: FormBuilder) {
   this.totalForm = this.fb.group({
       'subForm': this.fb.group({
           testName: [null, Validators.required]
       // ....
      })
   });
}

当我向服务器提交数据时，我想使用输入字段中的新数据。但是我发现表单控件的数据没有更新。原因是表单不能双向绑定，除非使用ngModel。

  this.dataTobeSubmited = this.totalForm.controls['subForm'].controls['testName'].value;

我用的是Angular 5，当然可以加ngModel。但是如果以后我们升级到高版本，就会成为一个问题，因为

在 Angular 6 中不推荐将 Reactive Froms 与 ngModel 一起使用，并且在角度 7 中删除

我的案例是一个嵌套的响应式表单，有没有更好的方法来做双向绑定？

更新我的绑定

嵌套表单组示例的绑定。

<form [formGroup]="profileForm">
 <app-child [subForm]="profileForm.controls['subForm']"></app-child>
       <button (click)="whatIsTheFormValue()"> What Is My Value?</button>
 </form>

https://stackblitz.com/edit/angular-9dzabi

我说的对吗？

【问题讨论】：

一个更完整的例子可以帮助我们缩小问题的范围。另外，为了澄清，您是否正在访问表单组的值（this.totalForm.value），它的值不是最新的？
this.totalForm.value.subForm.testName，不，即使在 Angular 6 中也不添加 [(ngModel)]

标签： angular angular-forms

【解决方案1】：

你不需要 ngModel。使用this.totalForm.value 查看表单的当前值。

【讨论】：

不是。这是原始的山谷。
没有。 this.totalForm.value 它是当前值的 FormGroup 的获取器。显示您的组件的完整 html，也许您不会在所有输入的包装器中声明 [formGroup]="totalForm"。
相信我。我做了很多测试，我在某处看到 SO 说了同样的话。我不记得现在在哪里可以找到它。
我想在嵌套表单组中测试它。例如，stackblitz.com/edit/angular-9dzabi
如果您在子组件中需要它，请注入表单。是同一个对象。见：stackblitz.com/edit/angular-eb8czt

【解决方案2】：

有两种解决方案。

表单中任何更改的侦听器。这个FormGroup.valueChanges 可能就是你需要的。

基本上，流程将订阅 this.totalForm.valueChanges。在此订阅中，您可以对来自任何输入的任何更改做出反应。由于这是一个可观察的，您还可以使用 distinctUntilChanged 或 debounce.
让提交按钮启动一个函数，该函数通过this.totalForm.getRawValue() 获取表单数据。

希望对你有帮助。

【讨论】：

我测试了 getEawValue()。这是原始值。
订阅 valueChanges 并检查值。如果它仍然是原始值，那么您将表单绑定到模板的方式有问题。
valueChanges 似乎使用简单的形式。对于嵌套表单组，我不确定。因为今天下午，我在 valueChanges 中得到了 max stack size overflow 错误。
@您好，valueChanges 可帮助您实时检查表单值。您可以尝试使用 rx 运算符（例如 debounce）来忽略快速输入的更改。 getRawValue() 应该给你当前的表单值。如果没有，就像@JohnGallego 说的那样，你应该仔细检查绑定。
@NgocNamNguyen，我不知道如何应用去抖动。