我想在单击按钮
时动态添加行。我为此使用 react 形式。
这是我的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
方法
最佳答案
在这种情况下,您需要使用 Form Array。
像这样尝试:
.ts
this.loanProductForm = this.fb.group({
products: this.fb.array([
this.addProductFormGroup()
])
});
addProductFormGroup(): FormGroup {
return this.fb.group({
productId: ['', Validators.required],
price: ['', Validators.required],
loanTermId: ['', Validators.required],
quantity: ['', Validators.required],
deposit: ['', Validators.required],
total: ['', Validators.required],
});
}
addProductButtonClick(): void {
(<FormArray>this.loanProductForm.get('products')).push(this.addProductFormGroup());
}
.html
<button type="button" (click)="addProductButtonClick()">
Add Product
</button>
关于javascript - 动态添加一行 : Angular Reactive-Form,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58953095/