title: Angular 5: Dynamic Form Validation inside a table
body: <p>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.</p>
  
  <p><strong>HTML code</strong></p>
  
  <pre><code>&lt;form [formGroup]="tableForm"&gt;
      &lt;table class="shop-table table-responsive" cellspacing="0"&gt;
         &lt;tbody&gt;
           &lt;tr class="cart_item" *ngFor="let data of final_selected_data; let i= index;"&gt;
             &lt;td class="product-thumbnail"&gt;
               &lt;a href="#"&gt;&lt;img src="assets/images/nike.jpg" alt="" width="100"&gt;&lt;/a&gt;
             &lt;/td&gt;
             &lt;td class="product-name"&gt;
                &lt;a href="#"&gt;{{data.size_ui}} ({{data.color_ui}}, {{data.material_ui}})&lt;/a&gt; &lt;/td&gt;
              &lt;td class="product-quantity" data-title="SKU"&gt;
                 &lt;div class="quantity buttons_added"&gt;
                    &lt;input step="1" value="" title="SKU" class="text" size="6" type="text" placeholder="SKU*" style="width:80px;" matInput [formControl]="tableForm.controls['variant_sku'+i]"&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td class="product-quantity" data-title="Price"&gt;
                 &lt;div class="quantity buttons_added"&gt;
                    &lt;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]"&gt;
                  &lt;/div&gt;
               &lt;/td&gt;
                 &lt;td class="product-remove"&gt;
                    &lt;a href="#" class="remove" title="Remove this item"&gt;&lt;mat-icon&gt;delete&lt;/mat-icon&gt;&lt;/a&gt; 
                 &lt;/td&gt;
               &lt;/tr&gt;
              &lt;/tbody&gt;
             &lt;/table&gt;
            &lt;/form&gt;
  </code></pre>
  
  <p><strong>Component.ts</strong></p>
  
  <pre><code>ngOnInit() {
     for(let i = 0; i &lt; 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])]
            });
         }
  }
  </code></pre>
  
  <p><strong>Error</strong></p>
  
  <blockquote>
    <p>ERROR Error: Cannot find control with unspecified name attribute</p>
  </blockquote>