Angular setting input type="date" at start at actual date

Issue

I have the following code and i want to get the input to start with the the actual date

<div class="form-outline mb-4">
      <label class="form-label" for="enroll"><b>User Enrollement Date</b></label>
      <input type="date" class="form-control" id="date" name="date" required [form-control]="EnrollmentDate"/>
</div>

in component.ts i have the following:

export class AppComponent {
  EnrollementDate = new FormControl(new Date());

How i can start the date input like this: instead of this: ?

Solution

I think you want to bind the formControl to a formControl and not to a ngModel

<div class="form-outline mb-4">
      <label class="form-label" for="enroll"><b>User Enrollement Date</b></label>
      <input type="date" class="form-control" id="date" name="date" required [formControl]="EnrollmentDate"/>
</div>

Also the input is always working with string so you have also to do it like that:

EnrollmentDate = new FormControl(new Date().toISOString().substr(0, 10));

Demo: https://stackblitz.com/edit/angular-qdstvv?file=src/app/app.component.ts

Answered By - Flo