Я первый раз наткнулся на проблему, что форм контролы только привязываются к вэлью аксессорам и никогда не отвязываются.
поэтому при написании кода следующего вида:

<input [formControl]="form.get(activeId)"/>

...
activeId = 0;

form = this.formBuilder.group({
 0: '',
 1: '',
 2: '',
});

После смены activeId при изменении значения контрола 0 будет обновлено значение инпута, несмотря на то, что контрол поменялся.

По сорсам придумал костыль следующего вида:

<input [formControl]="activeControl$ | async"/>

...
activeId$ = new BehaviorSubject(0);

form = this.formBuilder.group({
 0: '',
 1: '',
 2: '',
});

activeControl$ = this.activeId$.pipe(
 distinctUntilChanged(),
 map(id => this.form.get(id)),
 startWith(null),
 pairwise(),
 map(([prev, cur]) => {
   if (prev) {
     (prev as FormControl & { _clearChangeFns: () => void })._clearChangeFns();
   }
   return cur;
 }),
);

В классе FormControl есть непубличный метод _clearChangeFns, который сбрасывает массивы коллбэков контрола, что по сути…

Я первый раз наткнулся на проблему, что форм контролы только привязываются к вэлью аксессорам и никогда не отвязываются.
поэтому при написании кода следующего вида:

<input [formControl]="form.get(activeId)"/>

...
activeId = 0;

form = this.formBuilder.group({
 0: '',
 1: '',
 2: '',
});

После смены activeId при изменении значения контрола 0 будет обновлено значение инпута, несмотря на то, что контрол поменялся.

По сорсам придумал костыль следующего вида:

<input [formControl]="activeControl$ | async"/>

...
activeId$ = new BehaviorSubject(0);

form = this.formBuilder.group({
 0: '',
 1: '',
 2: '',
});

activeControl$ = this.activeId$.pipe(
 distinctUntilChanged(),
 map(id => this.form.get(id)),
 startWith(null),
 pairwise(),
 map(([prev, cur]) => {
   if (prev) {
     (prev as FormControl & { _clearChangeFns: () => void })._clearChangeFns();
   }
   return cur;
 }),
);

В классе FormControl есть непубличный метод _clearChangeFns, который сбрасывает массивы коллбэков контрола, что по сути…

Я первый раз наткнулся на проблему, что форм контролы только привязываются к вэлью аксессорам и никогда не отвязываются.
поэтому при написании кода следующего вида:

<input [formControl]="form.get(activeId)"/>

...
activeId = 0;

form = this.formBuilder.group({
 0: '',
 1: '',
 2: '',
});

После смены activeId при изменении значения контрола 0 будет обновлено значение инпута, несмотря на то, что контрол поменялся.

По сорсам придумал костыль следующего вида:

<input [formControl]="activeControl$ | async"/>

...
activeId$ = new BehaviorSubject(0);

form = this.formBuilder.group({
 0: '',
 1: '',
 2: '',
});

activeControl$ = this.activeId$.pipe(
 distinctUntilChanged(),
 map(id => this.form.get(id)),
 startWith(null),
 pairwise(),
 map(([prev, cur]) => {
   if (prev) {
     (prev as FormControl & { _clearChangeFns: () => void })._clearChangeFns();
   }
   return cur;
 }),
);

В классе FormControl есть непубличный метод _clearChangeFns, который сбрасывает массивы коллбэков контрола, что по сути…