将所有FromGroup控件值传递给另一个FormGroup

Question

该应用有以下行为：

1. 单击按钮会将当前FormGroup值传递给模式
2. 在模式中，我们更改值并提交更改
3. onSubmit（）方法采用更改后的FormGroup，并将其发送回上一个视图
4. 上一个视图将模态中已更改的FormGroup值传递给当前FormGroup，并将其传递给当前FormGroup：

当前视图：

async changeDescription(description: FormGroup, i: number) {
    const modal = await this.modalController.create({
        component: ChangeDescriptionModalComponent,
        componentProps: {
            wordDescription: description
        }
    });

    modal.onDidDismiss().then(dataReturned => {
        if (dataReturned !== null) {
            this.wordPartOfSpeechType.controls[i] = dataReturned.data;
        }
    });

    return await modal.present();
}

模式视图：

async onSubmit() {
    if (this.isFreeType) {
        this.wordDescription.get('type').setValue('');
    } else {
        this.wordDescription.get('typeFreeForm').setValue('');
    }
    await this.modalController.dismiss(this.wordDescription);
}

这是最小的工作示例。单击第二个描述块上的铅笔，更改模态内的值并接受它。前一个视图的值不会更改。 https://stackblitz.com/edit/ionic-v4-angular-tabs-kcgngx

Answer 1

首先要注意的是，您提供的堆叠闪电战绝非轻描淡写；）我去除了堆叠闪电战中的所有噪音以展示问题。所以主要问题是以下几行：

this.wordPartOfSpeechType.controls[i] = dataReturned.data;

您需要使用setValue或patchValue来设置值。另外，您还从模态中返回FormGroup。而是传递以下形式的值：

async onSubmit() {
  await this.modalController.dismiss(this.wordDescription.value);
}

那么您可以做：

modal.onDidDismiss().then(dataReturned => {
  if (dataReturned) {
    this.wordPartOfSpeechType.at(i).setValue(dataReturned.data)
  }
});

解雇时，您不需要通过任何内容。您的表格保持不变。

async cancel() {
    await this.modalController.dismiss();
}

您的 STACKBLITZ

的叉子