angular - 使用 NGRX 更新表单会返回 ViewDestroyedError

Question

所以我将我的表单从 API 加载到商店中。我从商店渲染表格。但是当我更新我的商店字段时，它不会更新视图中的字段。

我打电话给我ngOnInit()

this.store.select((state) => state.forms).subscribe((forms) => {
  const form = forms.sliderForms[FormNames.AddEmployeeForm];
  if (form) {
    this.initializeFormControls(form.slides);
    this.changeDetectorRef.detectChanges();
  }
});

并以这种方式初始化表单控件：

  initializeFormControls(slides: Slide[]) {
    this.data = slides;
    this.data.forEach((slide: Slide) => {
      const formGroup = this.fb.group({});
      slide.fields.forEach((field: Field) => {
        if (field) {
          // Set form control and its' validators
          formGroup.addControl(field.id, this.fb.control(field.value));
        }
      });
      this.mainGroup.addControl(slide.formName, formGroup);
    });
    this.changeDetectorRef.detectChanges();
  }

我将控件发送到视图中的子组件：

<form *ngIf="data; else loading" [formGroup]="mainGroup">
  <app-slides (slider)="getSlider($event)">
    <app-slide *ngFor="let slide of data; let i = index" [title]="slide.title" [formGroupName]="slide.formName">
      <app-field *ngFor="let field of slide.fields" [field]="field" [group]="mainGroup.controls[slide.formName]"></app-field>
    </app-slide>
  </app-slides>
</form>

因此，每次商店发生变化时都会调用这些。为什么我的视图在更新它们时不会改变值？

如果我从商店中删除整个字段，它确实会改变。

如果我离开页面并返回，则值会更新。

编辑：

这是字段组件

export class FieldComponent implements OnInit {
  @Input() field: Field = new Field();
  @Input() group: FormGroup;
  @Input() formName: string;

  constructor(
    private store: Store<IAppState>,
  ){}

  ngOnInit() {
    this.store.select((state) => state.forms).subscribe(() => {
      if (this.field) {
        console.log(this.group.controls[this.formName]); // Gives old value every time
      }
    })
  }
}

标签： angularngrx