Двухстороннее связывание с реактивными формами без использования 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;

Я использую Angular 5, конечно, я могу добавить ngModel. Однако, если в будущем мы перейдем на более высокую версию, это станет проблемой, поскольку

Использование Reactive Froms с ngModel устарело в angular 6 и удаляется в 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

Для этого есть 2 решения.

1. Прослушиватель любых изменений в форме. Это FormGroup.valueChanges может быть то, что вам нужно.

   По сути, поток будет иметь подписку на this.totalForm.valueChanges. Внутри этой подписки вы можете реагировать на любые изменения с любого входа. Поскольку это наблюдаемое, вы также можете использовать такие операторы, как distinctUntilChanged или debounce.

2. У кнопки «Отправить» есть функция, которая получает данные формы через this.totalForm.getRawValue().

Надеюсь, это поможет.

Answer 2

Вам не нужно ngModel. используйте this.totalForm.value, чтобы увидеть текущее значение вашей формы.