Angular Reactive Forms FormArray - 添加按钮以打开另一个弹出表单答案

【问题标题】：Angular Reactive Forms FormArray - Add button to open another pop up formAngular Reactive Forms FormArray - 添加按钮以打开另一个弹出表单
【发布时间】：2020-03-31 16:09:20
【问题描述】：

我正在尝试实现以下场景。我有一个带有输入控件的表单。一个元素是formarray。这个表单数组的输入控件很少。添加按钮以创建此表单数组。单击添加按钮时，应出现一个新的弹出窗口或模式来填写值。是否可以使用 ngx bootstrap 或 angular material 或 ngtemplateOutlet 或 ngcontainer。请提供建议。是否可以在模型中收集整个提交。

【问题讨论】：

你到现在都做了什么？？
这些答案似乎没有回答我的问题。我有主要形式。它有一个表单数组。在所有网站中，我看到当单击添加按钮时，这个表单数组控件是以相同的形式创建的。但对我来说，每次单击添加按钮时，此 formarray 控件都应显示在弹出模式中。

标签： angular modal-dialog popup reactive formarray

【解决方案1】：

这里是完整的工作StackBlitz Link

首先你需要你的表单数组组件让我们这么说......

ngOnInit() {
this.form = this.fb.group({
  questions: this.fb.array([
    this.fb.group({
        questionNumber: new FormControl(this.data.questionCount + 1, { validators: [Validators.required] }),
        type: new FormControl('paragraph'),
        text: new FormControl('', { updateOn: 'blur', validators: [Validators.required, Validators.maxLength(30)]})
      }),
    ]),
})

}

在 app.component 中，您可以取回数据并像这样打开 Mat-Dialog...

openDialog() {
const dialogRef = this.dialog.open(AddQuestionDialog, {
  width: '600px',
  data: { questionCount: 0 }
});

dialogRef.afterClosed().subscribe(result => {
  console.log('The dialog was closed', result);
  this.animal = result;
});

对于更完整的工作示例，您可以在上面的 stack-blitz 链接中找到...

【讨论】：

【解决方案2】：

我认为角度材料 MatDialog 对你有用。您将必须为将要收集的值创建一个组件，并在模式关闭时订阅数据并将其推送到您的表单。一个好的起点将是 agular 材料guide

【讨论】：

【解决方案3】：

看来这篇博文将有助于完成我的任务。唯一的事情是我需要使用 ngx 引导程序或材料来添加弹出模式。

[https://www.brophy.org/post/nested-reactive-forms-in-angular2/][1]

【讨论】：