title: How to set a conditional required validator on input text fields based on input-checkbox in a dynamic table
body: <p>I’m trying to make the ‘data’ input field required based on the checkbox found on the left of the table. i.e if the box is checked then and the ‘data’ input field becomes ‘required’ for that specific letter only.</p>
  
  <p>The letters are loaded dynamically from a database and are not hard coded.</p>
  
  <p>My approach was this:</p>
  
  <pre><code>[required]="letters[idx].checkbox==true" &lt;!-- line 32 --&gt;
  </code></pre>
  
  <p>But it doesn’t seem to be working. Is there another way for doing this?</p>
  
  <pre><code>&lt;form name="editForm" role="form" (ngSubmit)="save()" #editForm="ngForm"&gt;
      &lt;div class="form-row"&gt;
          &lt;div class="form-group" *&gt;
              &lt;table class="table"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;
                              &lt;span&gt;Select&lt;/span&gt;
                          &lt;/th&gt;
                          &lt;th&gt;
                              &lt;span&gt;Name&lt;/span&gt;
                          &lt;/th&gt;
                          &lt;th&gt;
                              &lt;span&gt;Data&lt;/span&gt;
                          &lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr *ngFor="let letter of letters ; let idx = index;"&gt;
                          &lt;td&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;div class="form-check"&gt;
                                      &lt;input type="checkbox" class="form-check-input" name="check-box-letters" id="field_ check-box-letters" [(ngModel)]=" letter.checkbox "
                                      /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              {{letter.name}}
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input type="text " class="form-control " name="data " id="field_data " [(ngModel)]="letters[idx].data " [required]="letters[idx].checkbox==true "
                              /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/bhzOB.png" rel="nofollow noreferrer">expected output the code</a>
  <a href="https://i.stack.imgur.com/7qHY9.png" rel="nofollow noreferrer">the current output of the above code</a></p>