Angular 5:表格内的动态表单验证 [英] Angular 5: Dynamic Form Validation inside a table

问题描述

我正在尝试使用表单组验证表内的输入字段，但无法实现相同的效果.我使用 *ngFor 来迭代数据，因为我必须在表的第一列中显示该数据，而其他列只是输入文本字段，我必须在其中添加表单验证.因此，我为该字段添加了唯一表单控件名称的索引.

HTML 代码

<table class="shop-table table-responsive" cellpacing="0"><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="数量按钮_已添加"><input step="1" value="" title="SKU" class="text" size="6" type="text" placeholder="SKU*" style="width:80px;"matInput [formControl]="tableForm.controls['variant_sku'+i]">

</td><td class="product-quantity" data-title="Price"><div class="数量按钮_已添加"><input step="1" min="0" max="" value="" title="Price" class="text" size="6" type="number" placeholder="Price*" style="宽度:80px;"matInput [formControl]="tableForm.controls['variant_price'+i]">

</td><td class="product-remove"><a href="#" class="remove" title="删除此项"><mat-icon>删除</mat-icon></a></td></tr></tbody></表单>

Component.ts

ngOnInit() {for(let i = 0; i 

错误

<块引用>

ERROR 错误:找不到具有未指定名称属性的控件

解决方案

您现在所做的只是在您的表单中创建 2 个表单控件，无论您的数组长度如何.你需要的是一个 FormArray ，你可以为数组中的每个对象推送新的表单组......所以缩短的版本是:

this.tableForm = this.fb.group({arr: this.fb.array([])})让 arr = this.tableForm.get('arr') 作为 FormArray;for (让 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]]}))}

然后在您的模板中迭代您的表单数组:

<表格><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"><!-- 不漂亮，只是为了演示！--><p *ngIf="a.hasError('required', 'variant_sku')">必需！</p></td></tr></tbody></表单>

演示:https://stackblitz.com/edit/angular-vcjjfr?file=src%2Fapp%2Fapp.component.html

I am trying to validate input fields inside a table using form group but unable to achieve the same. I am using *ngFor to iterate the data because I have to display that data in the first column of the table and other columns are just input text fields in which I have to add form validation. So I have added the index for the unique form control name for the field.

HTML code

<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])]
          });
       }
}

Error

ERROR Error: Cannot find control with unspecified name attribute

解决方案

What you are doing now, is only creating 2 form controls inside your form, no matter the length of your array. What you need, is a FormArray to which you push new form groups for each object you have in your array... so a shortened version would be:

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]]
  }))
}

Then in your template you iterate your 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>

DEMO: https://stackblitz.com/edit/angular-vcjjfr?file=src%2Fapp%2Fapp.component.html

这篇关于Angular 5:表格内的动态表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！