在 Angular 中创建 Table 在 Angular 中创建响应式表单
Creating Table in Angular Reactive Forms in Angular
我正在尝试使用 Angular Material 中的反应形式创建 table。问题是我如何实现一个功能,当您单击按钮 "add row" 时,它会自动添加一行,您可以在其中输入字段。
Please see this stackblitz link
createForm() {
this.form = this.fb.group({
products: this.fb.array([]),
});
}
addRow() {
const rows = this.form.get('products') as FormArray;
rows.push(
this.fb.group({
product_id: [null],
})
);
}
你可以按照下面的方式制作
- FormArray 中的输入应具有唯一 ID
- data-table 需要 trackBy 来避免行操作错误
- 更新数据-table 使用table.renderRows();
<form [formGroup]="form">
<mat-card class="mat-elevation-z8">
<mat-table
#table
class="mat-elevation-z0"
[dataSource]="dataSource" [trackBy]="trackRows">
<!-- Product Column -->
<ng-container matColumnDef="product">
<!-- <mat-header-cell *matHeaderCellDef>Product</mat-header-cell> -->
<mat-cell *matCellDef="let row; let i = index">
<ng-container [formGroup]="row">
<mat-form-field>
<mat-label>Product</mat-label>
<input matInput placeholder="Product"
id="product_id_{{i}}"
name="product_id_{{i}}"
formControlName="product_id" required />
</mat-form-field>
</ng-container>
</mat-cell>
</ng-container>
<!-- Unit Column -->
<ng-container matColumnDef="unit">
<!-- <mat-header-cell *matHeaderCellDef>Unit</mat-header-cell> -->
<mat-cell *matCellDef="let row; let i = index">
<ng-container [formGroup]="row">
<mat-form-field>
<mat-label>Unit</mat-label>
<input matInput placeholder="Unit"
id="unit_{{i}}"
name="unit_{{i}}"
formControlName="unit" required />
</mat-form-field>
</ng-container>
</mat-cell>
</ng-container>
<!-- Header Declarations -->
<!--
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-->
<!-- Row Declarations -->
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<mat-card-actions>
<button mat-raised-button color="primary"
(click)="createRow()">
<mat-icon>add</mat-icon>
Add New
</button>
</mat-card-actions>
</mat-card>
</form>
import { Component, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormArray, AbstractControl } from '@angular/forms';
import { MatTable, MatTableDataSource } from '@angular/material/table';
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
form: FormGroup;
private formSubmitAttempt: boolean;
private uid = 0;
@ViewChild('table') table: MatTable<any>;
displayedColumns = ['product', 'unit'];
dataSource: MatTableDataSource<AbstractControl>;
get productControlArray() {
return this.form.get('products') as FormArray;
}
constructor(private fb: FormBuilder) {
this.createForm();
this.addRow();
this.dataSource = new MatTableDataSource(
this.productControlArray.controls);
}
createForm() {
this.form = this.fb.group({
products: this.fb.array([]),
});
}
trackRows(index: number, row: AbstractControl) {
return row.value.uid;
}
private addRow() {
const rows = this.productControlArray;
rows.push(
this.fb.group({
uid: this.nextUid(),
product_id: [undefined, Validators.required],
unit: [0, Validators.required]
})
);
}
createRow() {
this.addRow();
this.table.renderRows();
}
private nextUid() {
++this.uid
return this.uid;
}
}
我正在尝试使用 Angular Material 中的反应形式创建 table。问题是我如何实现一个功能,当您单击按钮 "add row" 时,它会自动添加一行,您可以在其中输入字段。
Please see this stackblitz link
createForm() {
this.form = this.fb.group({
products: this.fb.array([]),
});
}
addRow() {
const rows = this.form.get('products') as FormArray;
rows.push(
this.fb.group({
product_id: [null],
})
);
}
你可以按照下面的方式制作
- FormArray 中的输入应具有唯一 ID
- data-table 需要 trackBy 来避免行操作错误
- 更新数据-table 使用table.renderRows();
<form [formGroup]="form">
<mat-card class="mat-elevation-z8">
<mat-table
#table
class="mat-elevation-z0"
[dataSource]="dataSource" [trackBy]="trackRows">
<!-- Product Column -->
<ng-container matColumnDef="product">
<!-- <mat-header-cell *matHeaderCellDef>Product</mat-header-cell> -->
<mat-cell *matCellDef="let row; let i = index">
<ng-container [formGroup]="row">
<mat-form-field>
<mat-label>Product</mat-label>
<input matInput placeholder="Product"
id="product_id_{{i}}"
name="product_id_{{i}}"
formControlName="product_id" required />
</mat-form-field>
</ng-container>
</mat-cell>
</ng-container>
<!-- Unit Column -->
<ng-container matColumnDef="unit">
<!-- <mat-header-cell *matHeaderCellDef>Unit</mat-header-cell> -->
<mat-cell *matCellDef="let row; let i = index">
<ng-container [formGroup]="row">
<mat-form-field>
<mat-label>Unit</mat-label>
<input matInput placeholder="Unit"
id="unit_{{i}}"
name="unit_{{i}}"
formControlName="unit" required />
</mat-form-field>
</ng-container>
</mat-cell>
</ng-container>
<!-- Header Declarations -->
<!--
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-->
<!-- Row Declarations -->
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<mat-card-actions>
<button mat-raised-button color="primary"
(click)="createRow()">
<mat-icon>add</mat-icon>
Add New
</button>
</mat-card-actions>
</mat-card>
</form>
import { Component, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormArray, AbstractControl } from '@angular/forms';
import { MatTable, MatTableDataSource } from '@angular/material/table';
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
form: FormGroup;
private formSubmitAttempt: boolean;
private uid = 0;
@ViewChild('table') table: MatTable<any>;
displayedColumns = ['product', 'unit'];
dataSource: MatTableDataSource<AbstractControl>;
get productControlArray() {
return this.form.get('products') as FormArray;
}
constructor(private fb: FormBuilder) {
this.createForm();
this.addRow();
this.dataSource = new MatTableDataSource(
this.productControlArray.controls);
}
createForm() {
this.form = this.fb.group({
products: this.fb.array([]),
});
}
trackRows(index: number, row: AbstractControl) {
return row.value.uid;
}
private addRow() {
const rows = this.productControlArray;
rows.push(
this.fb.group({
uid: this.nextUid(),
product_id: [undefined, Validators.required],
unit: [0, Validators.required]
})
);
}
createRow() {
this.addRow();
this.table.renderRows();
}
private nextUid() {
++this.uid
return this.uid;
}
}