在NGX-Formly中使用NGX-DataTable时,要向模型添加新行,可以通过以下步骤实现:
import { FormArray } from '@angular/forms';
import { FormGroup } from '@angular/forms';
import { FieldType } from '@ngx-formly/core';
fields: [
{
key: 'dataTable',
type: 'datatable',
templateOptions: {
addRowButton: true
},
fieldArray: {
fieldGroup: []
}
}
]
export class DataTableTypeComponent extends FieldType {
defaultOptions = {
templateOptions: {
addRowButton: false
}
};
addRow() {
const formArray = this.formControl as FormArray;
const newRow = new FormGroup({});
formArray.push(newRow);
}
}
<ngx-datatable formArrayName="dataTable">
<ngx-datatable-column>
<!-- 表格列配置 -->
</ngx-datatable-column>
</ngx-datatable>
<button type="button" (click)="addRow()" *ngIf="to.addRowButton">Add Row</button>
addRow() {
const formArray = this.form.get('dataTable') as FormArray;
const newRow = new FormGroup({});
formArray.push(newRow);
}
通过以上步骤,就可以在NGX-Formly中使用NGX-DataTable时向模型添加新行。在表单中点击"Add Row"按钮,就会动态添加一行到表格中,并且在模型中也会添加对应的数据。
注意:以上代码是基于NGX-Formly和NGX-DataTable的假设,实际应用中可能需要根据具体的版本和配置进行调整。另外,如果需要使用腾讯云的相关产品,可以参考腾讯云官方文档进行选择和配置。
云原生正发声
高校开发者
serverless days
Elastic 实战工作坊
Elastic 实战工作坊
数字化产业研学汇第二期
高校公开课
Elastic 中国开发者大会
云+社区技术沙龙[第27期]
北极星训练营
领取专属 10元无门槛券
手把手带您无忧上云