页面最初是作为模板驱动的表单编写的,但正在转换为响应式以添加自动保存功能。
在页面组件的构造函数中,我定义了响应式表单变量:
this.form = fb.group({
reviewer: '',
position: '',
officeName: '',
rows: fb.array([]),
comments1: '',
comments2: '',
comments3: ''
});
“行”是与此问题相关的字段。
在 ngInit 中,通过 Web api 发出请求以检索持久的表单数据。数据以行数组的形式检索,每行包含 6 个单元格的数组。第三个单元格将绑定到 FormControl,其他单元格将呈现为静态文本。
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))
]
};
});
let faRows = new FormArray([]);
for (var i = 0, len = this.rows.length; i < len; i++) {
let row = this.rows[i].cells;
for (var j = 0, length = this.rows[i].cells.length; j < length; j++) {
let fc = new FormControl(this.rows[i].cells[j]);
faRows.push(fc);
}
}
// this.form.setValue({rows: faRows});
// this.form.setControl('rows', faRows);
在 html 中:
<tbody>
<tr *ngFor="let row of rows;let r = index" [attr.data-index]="r">
<ng-container>
<td *ngFor="let cell of row.cells;let i = index" [attr.data-index]="i">
<span *ngIf="i != 2">{{cell}}</span>
<!-- <input type="text" formControlName="form.rows[r]" *ngIf="i == 2"> -->
</td>
</ng-container>
</tr>
</tbody>
根据评论和答案,我已经澄清了我的意图和代码。[谢谢@amal 和@DeborahK] 我现在只将每行中的一个数据单元格绑定到 FormControl,每行中的其他单元格显示为:{{cell}}
因此,我需要渲染 this.rows 的内容(如 html 所示)以及 this.form.rows。
我目前在理解如何实现这一点时遇到两个问题。在打字稿中,留下循环的最后块迭代创建行的 FormControls 的数据行,数组 faRows 精确地包含我所期望的,一个 FormArray 的 FormControls,并且每个都检索到它的正确关联保存值。但是,当尝试从 this.rows 复制数据以创建 form.rows 的 FormControls 时,我无法让 setValue 或 setControl 正常工作。这可能与html页面上FormControl的命名有关,这是我的第二个问题。
我不清楚如何引用表单变量以在html中动态创建formControlName。这是我想象的,但它不起作用。
<input type="text" formControlName="form.rows[r]" *ngIf="i == 2">