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

Upload файла в Angular по клику кнопки

Создано простейшее nestjs приложение, принимающее файлы. Выбор и отправка файла по клику подразумевает, что на форме отсутствует input для файла. Отправка запроса осуществляется с отслеживанием прогресса.

Angular Storybook

Установите пакет npm i @storybook/cli -g и запустите команду sb init в корне angular проекта.

30 октября 2018 г. в Angular

Angular Let Directive

*ngIf не отображает содержимое в falsy случаях (0, null, undefined) на async pipe, в пакете @rx-angular/template предлагается решение