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])
});

审阅者，职位，officeName和评论字段按预期工作，但我无法理解如何表示作为一个行和单元格（网格）的双数组返回的数据集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中存在的每个控件。希望它有所帮助。

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

1 个答案: