How to conditionally require form inputs in angular 4? : <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>
