Я пытаюсь проверить поля ввода внутри таблицы с помощью группы форм, но не могу этого добиться. Я использую * 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>
Component.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])]
});
}
}
Ошибка
ОШИБКА Ошибка: не удается найти элемент управления с неопределенным атрибутом имени.