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>

想法很简单。当表单的值更改时，内部组件将发出事件。外部组件使用事件中的数据，并向存储分派一个操作，该存储将更新实体，并将更新后的实体传递回内部组件。然后内部组件使用它来修补表单的值。

问题是，每次表单字段更改时，元素都会失去焦点。如果存在输入框，选择框或任何形式的控件，则在每次调度时，该元素都会失去焦点。

任何帮助表示赞赏！

从反应形式更新ngrx实体

0 个答案: