angular - Angular 5:表格内的动态表单验证
问题描述
我正在尝试使用表单组验证表内的输入字段,但无法实现。我正在使用 *ngFor 来迭代数据,因为我必须在表的第一列中显示该数据,而其他列只是输入文本字段,我必须在其中添加表单验证。所以我为字段的唯一表单控件名称添加了索引。
HTML 代码
<form [formGroup]="tableForm">
<table class="shop-table table-responsive" cellspacing="0">
<tbody>
<tr class="cart_item" *ngFor="let data of final_selected_data; let i= index;">
<td class="product-thumbnail">
<a href="#"><img src="assets/images/nike.jpg" alt="" width="100"></a>
</td>
<td class="product-name">
<a href="#">{{data.size_ui}} ({{data.color_ui}}, {{data.material_ui}})</a> </td>
<td class="product-quantity" data-title="SKU">
<div class="quantity buttons_added">
<input step="1" value="" title="SKU" class="text" size="6" type="text" placeholder="SKU*" style="width:80px;" matInput [formControl]="tableForm.controls['variant_sku'+i]">
</div>
</td>
<td class="product-quantity" data-title="Price">
<div class="quantity buttons_added">
<input step="1" min="0" max="" value="" title="Price" class="text" size="6" type="number" placeholder="Price*" style="width:80px;" matInput [formControl]="tableForm.controls['variant_price'+i]">
</div>
</td>
<td class="product-remove">
<a href="#" class="remove" title="Remove this item"><mat-icon>delete</mat-icon></a>
</td>
</tr>
</tbody>
</table>
</form>
组件.ts
ngOnInit() {
for(let i = 0; i < this.final_selected_data.length; i++){
var j = (i).toString();
let variant_sku = 'variant_sku'+j;
let variant_price = 'variant_price'+j;
let variant_stock = 'variant_stock'+j;
let variant_moq = 'variant_moq'+j;
this.tableForm = this.fb.group({
variant_sku: [null, Validators.compose([Validators.required])],
variant_price: [null, Validators.compose([Validators.required])]
});
}
}
错误
ERROR 错误:找不到具有未指定名称属性的控件
解决方案
您现在所做的只是在表单中创建 2 个表单控件,无论数组的长度如何。您需要的是FormArray
,您为数组中的每个对象推送新的表单组......所以缩短的版本将是:
this.tableForm = this.fb.group({
arr: this.fb.array([])
})
let arr = this.tableForm.get('arr') as FormArray;
for (let i = 0; i < this.final_selected_data.length; i++) {
arr.push(this.fb.group({
variant_sku: [this.final_selected_data[i].variant_sku, [Validators.required]]
}))
}
然后在您的模板中迭代您的formarray:
<form [formGroup]="tableForm">
<table>
<tbody formArrayName="arr">
<tr *ngFor="let a of this.tableForm.get('arr')['controls']; let i= index;">
<td class="product-quantity" [formGroupName]="i">
<input formControlName="variant_sku">
<!-- not pretty, but just for demonstration! -->
<p *ngIf="a.hasError('required', 'variant_sku')">Required!</p>
</td>
</tr>
</tbody>
</table>
</form>
演示:https ://stackblitz.com/edit/angular-vcjjfr?file=src%2Fapp%2Fapp.component.html
推荐阅读
- html - 文本区域对齐
- google-apps-script - 使用 setNumberFormat 将数字格式化为货币
- visual-studio - 断点无法在一个项目中绑定,但在另一个项目中没有
- oracle - {INS-08101] 数据库配置助手
- amazon-web-services - 通过 redshift-data api 在 AWS Redshift 中创建表
- javascript - 如何从包含线性渐变定义的字符串中提取颜色停止值?
- node.js - Jest + Mongoose: Have to run find twice to get results
- javascript - Getting numerical elements from Odometer syntax in Cypress
- php - Laravel 8 - Decrypt cookies
- bash - Does `pgrep` have a way to exclude child processes?