title: Angular2 Reactive Form Table
body: <p>I am having some trouble looking up and attempting to do what I want to.</p>
  
  <p>I have a table with inputs in each row, and I want each row which is created using an ngFor, to be considered a form group.</p>
  
  <p>Within each form group I want a validation in that if any of the controls are filled within the row, that the entire form group needs to be filled before submission can be done.</p>
  
  <p>Here is what I have so far in my template.</p>
  
  <p>I don't have anything in the component yet as Angular.io and searching around for a few hours has not shown me anything close to what I want.</p>
  
  <pre><code>&lt;form&gt;
          &lt;table id="table" class="mdl-data-table mdl-js-data-table mdl-data-table mdl-shadow--2dp"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Day&lt;/th&gt;
                      &lt;th&gt;Description&lt;/th&gt;
                      &lt;th&gt;Open Time&lt;/th&gt;
                      &lt;th&gt;Close Time&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
  
              &lt;tbody&gt;
  
                  &lt;tr *ngFor="let scheduleDetail of scheduleDetails"&gt;
                      &lt;td style="padding: 0 8px 0 8px;"&gt;{{weekdayConverter(scheduleDetail.dayId)}}&lt;/td&gt;
                      &lt;td class="pad-input"&gt;
                          &lt;mdl-textfield style="max-width:100px;" type="text" class="font" name="description" [(ngModel)]="scheduleDetail.description"&gt;&lt;/mdl-textfield&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;mdl-textfield style="max-width:75px" type="text" error-msg="hh:mm" name="openTime" pattern="([01]\d|2[0-3]):?([0-5]\d)" [(ngModel)]="scheduleDetail.openTime"&gt;&lt;/mdl-textfield&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;mdl-textfield style="max-width:75px" type="text" error-msg="hh:mm" name="closeTime" pattern="([01]\d|2[0-3]):?([0-5]\d)" [(ngModel)]="scheduleDetail.closeTime"&gt;&lt;/mdl-textfield&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
              &lt;/tbody&gt;
  
          &lt;/table&gt;
      &lt;/form&gt;
  </code></pre>
  
  <h2>Update</h2>
  
  <p>Added the following to the template:</p>
  
  <p>Changed inputs to:</p>
  
  <pre><code>&lt;mdl-textfield (keyup)="formChange(scheduleDetail)" style="max-width:100px;" type="text" class="font" name="description" [(ngModel)]="scheduleDetail.description"&gt;&lt;/mdl-textfield&gt;
  </code></pre>
  
  <p>Added the following to the component:</p>
  
  <pre><code>    formChange(detail:scheduleDetail){
  if(this.checkValid(detail)==false)
  this.scheduleDetails.filter(detail =&gt; detail == detail)[0].require=true;
  else
  this.scheduleDetails.filter(detail =&gt; detail == detail)[0].require=false;
  
  this.checkForm();
  }
  
  checkValid(detail:scheduleDetail){
  if(detail.description!=null &amp;&amp; detail.description!=""){
    if(this.checkTime(detail))
      return true
    else 
      return false
  }
  else
    return true
  }
  
  checkTime(detail:scheduleDetail){
    if(
      (detail.openTime!=null &amp;&amp; detail.closeTime!=null) &amp;&amp; 
      ( detail.openTime!="" &amp;&amp; detail.closeTime!="") &amp;&amp;
      (this.checkRegExp(detail.openTime) &amp;&amp; this.checkRegExp(detail.closeTime))
      ){
      return true
      }
  
    else if((this.checkRegExp(detail.openTime) &amp;&amp; this.checkRegExp(detail.closeTime))){
      return true
    }
    else return false
  }
  
  checkRegExp(time:string){
  let timeRegExp = /([01]\d|2[0-3]):?([0-5]\d)/;
  
  if(timeRegExp.test(time)){
    return true;
  }
  else
    return false;
  
  }
  
  checkForm(){
  let valid: boolean = true;
    this.scheduleDetails.forEach(detail =&gt; {
      if(detail.require==true){
        valid = false;
      }
    });
  
      this.scheduleDetails.forEach(detail =&gt; {
      if(detail.description=="" || detail.description==null){
        valid = false;
      }
    });
  this.formValid = valid;
  }
  </code></pre>