How to conditionally require form inputs in angular 4?

Question

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,

• one field is for estimated number of hrs and
• another is for estimated minutes to complete the task

since the task estimate can be done either in hours like 1hrs , or in hours and minutes like 1Hrs 30Mins , so i want to set attribute required 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.

so far i have done this but validation is not working

<form class="add-task" (ngSubmit)="onSubmit(newtask)" #newtask="ngForm">       <div class="estimate-container">         <input              type="number"              min="0"              max="10"              id="estimate_hrs"              ngModel              name="estimate_hrs"             mdInput              [required]="!estimateMins.valid"              placeholder="Estimated Hours"              #estimateHrs="ngModel"         >         <div class="error-msg" *ngIf="!estimateHrs.valid && !estimateMins.valid">             Please enter estimated hours          </div>         <input              type="number"              min="0"              max="60"              id="estimate_min"              ngModel              name="estimate_min"              mdInput              [required]="!estimateHrs.valid"              placeholder="Estimated Minutes"              #estimateMins="ngModel"         >         <div class="error-msg" *ngIf="!estimateMins.valid && !estimateHrs.valid">             Please enter estimated minutes         </div>        </div>     <button type='submit' [disabled]="!newtask.valid" >Submit</button> </form> 

Answer 1

Try using [attr.required] instead.

   <input          type="number"          min="0"          max="10"          id="estimate_hrs"          ngModel          name="estimate_hrs"         mdInput          [attr.required]="!estimateMins.valid"          placeholder="Estimated Hours"          #estimateHrs="ngModel"     > 

Answer 2

This is my working solution for Angular 5:

In component:

@Input() required: boolean; 

In template on the input (or select) element that:

[required]="required" 

On the selector:

[required]="true" 

Like @DeborahK double checked, no need for single quotes :-)