不使用 ngModel 的两种反应形式绑定

Question

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

<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;

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

Using Reactive Froms with ngModel is deprecated in angular 6 and is removed in angular 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

我说得对吗？

Answer 1

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

Answer 2

有 2 个解决方案。

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

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

希望对您有所帮助。

不使用 ngModel 的两种反应形式绑定

Two way binding with reactive forms without using ngModel

angular

angular-forms