Обновление сущности ngrx из реактивной формы

Question

У меня есть компонент контейнера, который подписывается на @ ngrx / store и отображает список компонентов, которые внутренне имеют форму. Иерархия компонентов выглядит следующим образом:

// orders-list.component.ts

export class OrdersListComponent {

  // more stuff
  
  ngOnInit() {
    this.orders$ = this.store.pipe(
      select(orderSelectors.selectAll)
    );
  }
  
  onOrderChange(id, changes) {
    this.store.dispatch(
      new OrderUpdateAction(id, changes);
    );
  }
}

// order.component.ts

export class OrderComponent {

  @Input() orderData;
  @Output() orderChange = new EventEmitter();

  // more stuff
  
  constructor() {
    this.form = this.formBuilder.group({ ... });
  }
  
  ngOnInit() {
    this.form.valueChanges.subscribe(value => {
      this.orderChange.emit(value);
    });
  }
  
  ngOnChanges() {
    this.form.patchValue(this.orderData);
  }

}

<orders-list>
  <order 
    *ngFor="let order of orders$ | async"
    [orderData]="order"
    (orderChange)="onOrderChange(order.id, $event)">
  </order>
</orders-list>

Идея проста. Когда значение формы изменяется, внутренний компонент генерирует событие. Внешний компонент использует данные из события и отправляет действие в хранилище, которое обновляет объект и передает обновленный объект обратно во внутренний компонент. Внутренний компонент затем использует это для исправления значения формы.

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

Любая помощь приветствуется!