Синхронизировать поля на реактивной форме Angular

  /**
   * Синхронизировать ввод значений контролов формы
   * @param a - первый контрол
   * @param b - второй контрол
   */
  private _syncControlValues(a: AbstractControl, b: AbstractControl): void {
    a.valueChanges
      .pipe(takeUntil(this._destroy$))
      .subscribe(value => b.setValue(value, { emitEvent: false }));
    b.valueChanges
      .pipe(takeUntil(this._destroy$))
      .subscribe(value => a.setValue(value, { emitEvent: false }));
  }

UPD: 19 января 2019 г. Альтернативный подход:
Создание отдельного контрола.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  search = new FormControl('tyapk');
}

В шаблоне компонента использовать созданные контрол во всех полях

<input placeholder="search 1" [formControl]="search" [value]="search.value" />
<input placeholder="search 2" [formControl]="search" [value]="search.value" />
<input placeholder="search 3" [formControl]="search" [value]="search.value" />

Похожие записи

#local variable внутри *ngIf

Представлены 2 варианта решения, как сослаться на локальную переменную шаблона (#myVar) за пределами шаблона:

  • @ViewChild
  • @ViewChildren
13 февраля 2019 г. в Angular

ngx translate attribute

Используется конструкция

<img src="image.jpg" [alt]="'KEY' | translate"> 
20 августа 2018 г. в Angular

Angular. Когда не надо отписываться в RxJS?

В async pipe за вас отпишется Angular. Во всех остальных случаях лучше отписываться самостоятельно. Допускается не отписываться в потоках, где будет гарантировано вызван complete.