使用 NgRx 选择器为 Angular Reactive Form 设置默认值答案

【问题标题】：Set default values for Angular Reactive Form using NgRx selector使用 NgRx 选择器为 Angular Reactive Form 设置默认值
【发布时间】：2021-04-17 10:39:35
【问题描述】：

我正在开发一个使用 Angular 和 NgRx 构建的应用程序。

我有一个响应式表单，我需要使用商店中的数据为一个表单控件设置默认值。

export class FormComponent implements OnInit {
 networks: Network[];
 form: FormGroup;

 ngOnInit(): void {
  this.form = this.fb.group({
    selectedNetworks: ['', [Validators.required]],
    ...
  });

  this.store.select(selectNetworks).subscribe(networks => {
   this.networks = networks;
   this.form.get('selectedNetworks').setValue(networks);
  });
}

<mat-select
  formControlName="selectedNetworks"
  multiple>

  <mat-option
    *ngFor="let n of networks"
    [value]="n">
     {{n.name}}
  </mat-option>
</mat-select>

如您所见，我有一个包含网络列表的多选。最初，应选择所有网络。

为了获得所有需要的网络，我需要发出几个 http 请求（这些是要求，不能更改）。每次成功请求后，ngrx 存储都会更新，selectNetworks 选择器会发出一个新值。如果我需要发出 2 个请求来获取网络，选择器将仅在第二次发射后返回所有网络。

还有一个 websocket 事件，它返回一个网络以防它被更新（例如状态被改变）。在这种情况下，ngrx 存储将被更新，selectNetworks 选择器将再次发出。

我的问题是在以下情况下：表单被初始化（所有网络都被选中），用户只选择了一个网络，websocket 事件被触发，selectNetworks订阅被执行并再次选择所有网络，丢弃用户所做的更改。

我进行了一些研究，并看到了一些使用 take(1) 的解决方案。但是，这在我的情况下不起作用，因为第一次发射可能不包含完整的网络列表。您知道是否有可以适用于我的案例的解决方案吗？

提前致谢！

【问题讨论】：

听起来像是更新问题。默认情况下，ngfor 通过对象引用进行检查，这通常会导致列表的完全重绘。您是否尝试过提供angular.io/api/common/NgForOf 中指定的 trackBy 函数
您是在商店中保留表单状态，还是只是本地/组件的状态？在这两种情况下，您都必须在不同的地方“手动”处理它
@dallows 表单状态为本地

标签： angular typescript rxjs ngrx

【解决方案1】：

从代码来看，我可以看到您正在使用商店中的状态覆盖控件的值，该状态再次选择所有内容。

这里有几个选项可以做什么，但基本上你应该将整个数组分配给控件的值，前提是已经没有值（没有选择任何值）。如果选择了某些内容，则在商店有更新时重复使用它。

// update network array declaration
networks: Network[] = [];

this.store.select(selectNetworks).subscribe(networks => {
  this.networks = networks;
  const selected = this.form.get('selectedNetworks').getValue();

  const controlValue = selected.length > 0 ? selected : networks;  
  // or !!selected, not exactly sure what will getValue() return
  this.form.get('selectedNetworks').setValue(controlValue);
});

【讨论】：