如何在 Angular Reactive Form 中使用网格/数组？

Question

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

页面有一系列文本输入，通过 .NET Web API 持久化到后端数据库。 Angular 服务调用 web 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 和 cmets 字段按预期工作，但我无法理解如何表示一个数据集，该数据集在 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。您可以为整个控件表创建一个formGroup，其中每个列/单元格由一个初始化为 FormArray 的控件表示，每个控件由一个 FormControls 数组组成（当您将其可视化时，它是相应的单元格值向下每列/单元格）。

假设你有 2 行，有值

(name of controls) -->      questionId              question          

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

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

这个表的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 控件属性来操作（插入/删除等）此 tableControl FormGroup 中存在的每个控件。希望对您有所帮助。