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

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

ngx translate attribute

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

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

Переиспользуемые анимации в Angular

Для создания анимации используется функция animation(). Для её использования — useAnimation(). Приводится пример переиспользуемой анимации, а также создание анимации через литерал объекта.

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

Angular. Редирект по условию

Пример условного перенаправления пользователя в зависимости от некого количества

  • 0 - dashboard
  • 1 - карточка
  • 2 и более - список
09 января 2019 г. в Angular