当我点击按钮时,我想动态添加行。我使用响应式表单实现此功能。
这是我的HTML代码:
<table>
<thead>
<tr class='tableHeader'>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
<td fxFlex="22" class="pr-4">Name</td>
<td fxFlex="15" class="pr-4">Price</td>
<td fxFlex="15" class="pr-4">Loan Term</td>
<td fxFlex="15" class="pr-4">Quantity</td>
<td fxFlex="15" class="pr-4">Deposit</td>
<td fxFlex="15" class="pr-4">Total</td>
</div>
</tr>
</thead>
<tbody>
<tr [formGroup]="loanProductForm">
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
<td fxFlex="22">
<mat-form-field appearance="outline" fxFlex="100" class="pr-4">
<mat-label>Product </mat-label>
<mat-select formControlName="productId" required>
<mat-option *ngFor="let product of productList" [value]="product.productId">
{{product.name}}
</mat-option>
</mat-select>
</mat-form-field>
</td>
<td fxFlex="15">
<mat-form-field appearance="outline" fxFlex="100" class="pr-4">
<mat-label>Price </mat-label>
<input type='number' matInput formControlName="price" name="" id="" placeholder="Price" required>
</mat-form-field>
</td>
<td fxFlex="15">
<mat-form-field appearance="outline" fxFlex="100" class="pr-4">
<mat-label>Loan Term </mat-label>
<mat-select formControlName="loanTermId" required>
<mat-option *ngFor="let loanTerm of loanTermList" [value]="loanTerm.loanTermId">
{{loanTerm.numberOfMonths}}
</mat-option>
</mat-select>
</mat-form-field>
</td>
<td fxFlex="15">
<mat-form-field appearance="outline" fxFlex="100" class="pr-4">
<mat-label>Quantity </mat-label>
<input type='number' formControlName="quantity" matInput name="" id="" placeholder="Quantity" required>
</mat-form-field>
</td>
<td fxFlex="15">
<mat-form-field appearance="outline" fxFlex="100" class="pr-4">
<mat-label>Deposit </mat-label>
<input type='number' formControlName="deposit" matInput name="" id="" placeholder="Deposit" required>
</mat-form-field>
</td>
<td fxFlex="15">
<mat-form-field appearance="outline" fxFlex="100" class="pr-4">
<mat-label>Total </mat-label>
<input type='number' formControlName="total" matInput name="" id="" placeholder="Total" required>
</mat-form-field>
</td>
</div>
</tr>
<tr>
<td fxFlex="10">
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
<button mat-stroked-button class='addBtn btn-style-2' fxFlex='100' (click)='addTableRow()'>Add
<mat-icon matSuffix>add_box</mat-icon>
</button>
</div>
</td>
</tr>
</tbody>
</table>
以下是我在我的ts
文件中尝试的方式:
this.loanProductForm = this._formBuilder.group({
productId: ['', Validators.required],
price: ['', Validators.required],
loanTermId: ['', Validators.required],
quantity: ['', Validators.required],
deposit: ['', Validators.required],
total: ['', Validators.required],
})
addTableRow() {
this.newRow = { productId: '', price: '', loanTermId: '', quantity: '', deposit: '', total: '' };
// this.tableRows.push(this.newRow)
}
但是代码不允许我在这个表单上使用push
方法。