首页 文章

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

提问于
浏览 次
1

最初创建为Angular 2模板表单，为了添加自动保存功能，我们将转换为Reactive表单 .

该页面有一系列文本输入，通过.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});

但它没有按照我的预期运作 .

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

arrays angular grid angular-reactive-forms

1 回答

  • 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中存在的每个控件 . 希望能帮助到你 .

    回复于

相关问题