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;

我使用Angular 5，当然可以添加ngModel。但是，如果将来我们升级到高版本，则由于

在Angular 6中不建议使用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

我对吗？

Answer 1

有2种解决方案。

一个侦听器，用于监听表单中的所有更改。 FormGroup.valueChanges可能就是您所需要的。

基本上，该流将具有对 good <- df8 %>% mutate(SAMPN=as.numeric(as.character(SAMPN))) %>% filter(!(SAMPN %in% Singlerow1$SAMPN))。在此订阅中，您可以对来自任何输入的任何更改做出反应。由于这是可以观察到的，您还可以使用诸如Error: Column或 can't be modified because it's a grouping variable。
具有“提交”按钮将启动一个功能，该功能可通过this.totalForm.valueChanges获取表单数据。

希望有帮助。

Answer 2

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

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

2 个答案: