Question

我已经使用以下question作为FormArray表单设计的基础。我试图做的事情的主要目的是使表单保持最新状态，页面上的其他地方也要进行更改，但是要切换此表单中的布尔值/复选框。（用户有他们选择的卡的列表，此表单显示了此选择的列表）

不幸的是，看来ngOnChanges正在不断更新表单，而我的更改已被覆盖。在我的构造函数中，我检测值更改，以发出这些更改。但是，

this.contextSummaryForm.dirty

始终为假。 rebuildForm（）上的断点表明该方法每秒被调用多次-因此将contextItem.isEditEnable更改为false会被完全覆盖。我可以阅读我的逻辑并了解为什么会发生这种情况-但我真的不明白我应该怎么做才能允许从其父组件更新contextList并允许用户在此处更新表单。

构造函数和变更检测

@Input()
contextList: ContextItem[];

@Output()
contextListChange  = new EventEmitter<any>();

valueChangeSubscription = new Subscription;
contextSummaryForm: FormGroup;
isLoaded: boolean = false;


constructor(protected fb: FormBuilder) {
   this.createForm();


   this.valueChangeSubscription.add(
         this.contextSummaryForm.valueChanges
         .debounceTime(environment.debounceTime)
           .subscribe((values) => {
           if (this.isLoaded && this.contextSummaryForm.valid && this.contextSummaryForm.dirty) {

             this.contextSummaryForm.value.plans.forEach(x => {
               var item = this.contextList.find(y => y.plan.id === x.id);
               item.isEditEnabled = x.isEditEnabled;
             });

             this.contextListChange.emit(this.contextList);
             this.contextSummaryForm.markAsPristine();
           }
         }));
     }

表单创建：

createForm(): void {
 this.contextSummaryForm = this.fb.group({
  plans: this.fb.array([this.initArrayRows()])
 });
}

initArrayRows(): FormGroup {
  return this.fb.group({
   id: [''],
   name: [''],
   isEditEnabled: [''],
});
}

OnChanges

  ngOnChanges(changes: SimpleChanges) {
for (let propName in changes) {
  if (propName === 'contextList') {
    if (this.contextList) {
      this.rebuildForm();
      this.isLoaded = true;
    }
  }
}
}

rebuildForm() {
  this.contextSummaryForm.reset({
  });
  //this.fillInPlans();
  this.setPlans(this.contextList);
}


  setPlans(items: ContextItem[]) {
    let control = this.fb.array([]);
    items.forEach(x => {
      control.push(this.fb.group({
        id: x.plan.id,
        name: x.plan.Name,
        isEditEnabled: x.isEditEnabled,
      }));
    });
    this.contextSummaryForm.setControl('plans', control);
  }

总结一下：我需要一种使用从输入绑定构建的formarray的方法，该数组可以跟上变化，而不会快速覆盖表单。

Answer 1

根据angular的文档

OnChanges：生命周期挂钩，当指令的任何数据绑定属性更改时会调用

话虽这么说，不是变更检测或onChanges钩子都覆盖了表单。最佳做法是，我们仅应构建一次表单，并使用FormArray的方法来干扰Array

代替重建表单，可以直接在数组上使用FormArray方法和push项。我认为无论数据是什么，您都面临的问题是您正在重建表单。

我的意思是：认为您有两个组成部分。孩子和父母。子级负责处理数据（添加，删除），而父级负责在表单上显示这些数据。尽管这样做似乎很简单，但是您必须过滤掉Child组件已经处理的所有项目。

在您的实现中，请尝试不要在onChanges上rebuild上使用表单，而应在数组上推送项目。

您应该将哪些项目推送到数组？（过滤掉所有已处理的项目）

const contextItemsToInsert = 
          this.contextList.filter((it: any) => !this.plans.value.map(pl => pl.id).includes(it.id));

这是一种可以解决您的问题的方法

ngOnChanges(changes: SimpleChanges) {
    for (let propName in changes) {
      if (propName === 'contextList') {

        const contextItemsToInsert = 
          this.contextList.filter((it: any) => !this.plans.value.map(pl => pl.id).includes(it.id));

            contextItemsToInsert.forEach((x: any) => {

              this.plans.push(this.fb.group({
                id: x.id,
                name: x.name,
                isEditEnabled: x.isEditEnabled,
              }))
            })

            // similar approach for deleted items
      }
    }
  }

  ngOnInit() {
    this.createForm();
  }

  createForm(): void {
    this.contextSummaryForm = this.fb.group({
      plans: this.fb.array([this.initArrayRows()])
    });
  }

  initArrayRows(): FormGroup {
      return this.fb.group({
        id: [''],
        name: [''],
        isEditEnabled: ['']
    });
  }

在这里您可以找到有效的示例https://stackblitz.com/edit/stackoverflow-53836673

这不是一个完整的示例，但可以帮助您理解问题所在。

我希望我能正确理解您面临的问题

Angular反应形式数组，变更检测替代形式

1 个答案: