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