Синхронизировать поля на реактивной форме 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" />

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

Как добавить ng-bootstrap компоненты в проект Angular-CLI?

Покажу на примере нового проекта.

ng new project_name
cd project_name
npm install --save bootstrap@next
npm install --save @ng-bootstrap/ng-bootstrap

В angular-cli.json в секцию style надо добавить наш CSS, чтобы глобально подключить стили.

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
17 августа 2017 г. в Angular

RxJS Pipeable Operators

Начиная с версии rxjs 5.5 операторы вместо цепочки вызовов применяются как параметры функции pipe.

@Attribute() декоратор

Аналогично @Input() позволяет получить значение атрибута с хоста компонента/директивы, но не отслеживает дальнейшее изменение атрибута.

15 сентября 2019 г. в Angular

Об subscribe() vs async

О предпочтительности использования async pipe. При OnPush стратегии не требуется вызывать markForCheck() внутри подписки +решение с несколькими | async pipes развёрнутых в одну переменную (внутри шаблона).