title: How to conditionally require form inputs in angular 4?
body: <p>I am using template driven forms for adding the task, and there are 2 input fields of type number for estimated mins to complete task, </p>
  
  <ul>
  <li>one field is for estimated number of hrs and</li>
  <li>another is for estimated minutes to complete the task</li>
  </ul>
  
  <p>since the task estimate can be done either in hours like <strong>1hrs</strong> , or in hours and minutes like <strong>1Hrs 30Mins</strong> , so i want to set attribute <strong>required</strong> to inputs conditionally. So one of the 2 inputs must be set or form validation error will occur if both inputs are empty when submitting form. </p>
  
  <p>so far i have done this but validation is not working </p>
  
  <pre><code>&lt;form class="add-task" (ngSubmit)="onSubmit(newtask)" #newtask="ngForm"&gt;  
      &lt;div class="estimate-container"&gt;
          &lt;input 
              type="number" 
              min="0" 
              max="10" 
              id="estimate_hrs" 
              ngModel 
              name="estimate_hrs"
              mdInput 
              [required]="!estimateMins.valid" 
              placeholder="Estimated Hours" 
              #estimateHrs="ngModel"
          &gt;
          &lt;div class="error-msg" *ngIf="!estimateHrs.valid &amp;&amp; !estimateMins.valid"&gt;
              Please enter estimated hours 
          &lt;/div&gt;
          &lt;input 
              type="number" 
              min="0" 
              max="60" 
              id="estimate_min" 
              ngModel 
              name="estimate_min" 
              mdInput 
              [required]="!estimateHrs.valid" 
              placeholder="Estimated Minutes" 
              #estimateMins="ngModel"
          &gt;
          &lt;div class="error-msg" *ngIf="!estimateMins.valid &amp;&amp; !estimateHrs.valid"&gt;
              Please enter estimated minutes
          &lt;/div&gt;   
      &lt;/div&gt;
      &lt;button type='submit' [disabled]="!newtask.valid" &gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>