如何在 Angular Reactive Form 中使用 grid/array？

Question

最初创建为 Angular 2 模板表单，为了添加自动保存功能，我们正在转换为响应式表单。

该页面有一系列文本输入，通过 .NET Web API 保存到后端数据库。 Angular 服务调用网络 api。

我创建了一个表示页面数据控件的 FormGroup：

const cells = fb.group({
        id: [''],
        question: [''],
        actual: [''],
        budget: [''],
        average: [''],
        top20: ['']            
});
this.form = fb.group({
    reviewer: '',
    position: '',
    officeName: '',
    comments1: '',
    comments2: '',
    comments3: '',
    rows: fb.array([cells, cells])
});

reviewer、position、officeName 和 comments 字段按预期工作，但我无法理解如何表示以行和单元格（网格）的双数组形式返回的数据集FormGroup 成功。

在模板表单版本中，网格数据由 observable 接收，如下所示：

    this.rows = summaryReportQuestion.map(summaryReportQuestionObj => {
        return {
            cells: [
                summaryReportQuestionObj.questionID,
                summaryReportQuestionObj.question,
                (summaryReportQuestionObj.columnSign == '$' ? (summaryReportQuestionObj.columnSign + ' ' + summaryReportQuestionObj.target) : summaryReportQuestionObj.target + ' ' + summaryReportQuestionObj.columnSign),
                (summaryReportQuestionObj.budget == null ? summaryReportQuestionObj.budget : (summaryReportQuestionObj.columnSign == '$' ? summaryReportQuestionObj.columnSign + ' ' + this.utilityService.formatNumberWithCommas(Math.floor(summaryReportQuestionObj.budget), false) : summaryReportQuestionObj.budget + ' ' + summaryReportQuestionObj.columnSign)),
                (summaryReportQuestionObj.average == null ? summaryReportQuestionObj.average : (summaryReportQuestionObj.columnSign == '$' ? summaryReportQuestionObj.columnSign + ' ' + this.utilityService.formatNumberWithCommas(Math.floor(summaryReportQuestionObj.average), false) : summaryReportQuestionObj.average + ' ' + summaryReportQuestionObj.columnSign)),
                (summaryReportQuestionObj.top20Percent == null ? summaryReportQuestionObj.top20Percent : (summaryReportQuestionObj.columnSign == '$' ? summaryReportQuestionObj.columnSign + ' ' + this.utilityService.formatNumberWithCommas(Math.floor(summaryReportQuestionObj.top20Percent), false) : summaryReportQuestionObj.top20Percent + ' ' + summaryReportQuestionObj.columnSign))
            ]
        };
    });

在 Reactive Form 版本中，我刚刚将 this.rows 的值分配给了我的 FormGroup 项目：

this.molForm.patchValue({rows: this.rows});

但它并没有像我预期的那样工作。

将双数组与表单组一起使用的最佳方法是什么？

Answer 1

由于这是一个冗长的控件列表，我将尝试在每行中使用 2 的单元格大小，例如 questionId 和 question。您可以为整个 table 个控件创建一个 formGroup，其中每个 column/cell 由一个初始化为 FormArray 的控件表示，每个控件由一个 FormControls 数组组成（当您可视化它，相应的单元格值是否每个 column/cell).

假设您有 2 行，具有值

(name of controls) -->      questionId              question          

  (row1 values)    -->         '1'               'First Question'

  (row2 values)    -->         '2'               'Second Question'

此 table 的 FormGroup 可以初始化为，

this.tableControl = this.formbuilder.group({
 questionId: new FormArray([new FormControl('1'), new FormControl('2')]),
 question: new FormArray([new FormControl('First Question'), new FormControl('Second Question')])
});

您可以为剩余的单元格进一步开发它。您还可以使用给定 here 的 FormArray 控件属性来操作（inserting/removing 等）此 tableControl FormGroup 中存在的每个控件。希望对你有帮助。

如何在 Angular Reactive Form 中使用 grid/array？

How to use grid/array in Angular Reactive Form?

arrays

grid

angular

angular-reactive-forms