时间戳

首页 > 解决方案 > Angular Reactive Forms FormArray - 添加按钮以打开另一个弹出表单

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

问题描述

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

标签： angularmodal-dialogpopupreactiveformarray

解决方案

这是完整的工作StackBlitz 链接

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

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 链接中找到...

推荐阅读