How can I set the default date in input portion?

Question

    <mat-form-field>
        <input matInput [matDatepicker]="picker1" placeholder="From date: mm-dd-yyyy" 
        name="from_date" [(ngModel)]="callListRequestOb.from_date" maxlength="150">
        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
        <mat-datepicker #picker1></mat-datepicker>
    </mat-form-field

(.ts file)

    constructor(
            private modalService: NgbModal,
            private aService: ApplicationService,
        ) {
            this.callListRequestOb = new CallListRequestModel();
            this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
            this.callListRequestOb.from_date = moment().format('MM-DD-YYYY');
            this.callListRequestOb.to_date = moment().format('MM-DD-YYYY');
            this.callListRequestOb.page_no = this.page;
            this.callListRequestOb.row_per_page = this.pageSize;
        }

How does this template-driven 'form' set today's date in the dom input portion? I've to use[(ngModel)] here.

Answer 1

please try this,

test.component.html

<mat-form-field>
    <input matInput [matDatepicker]="picker1" placeholder="From date: mm-dd-yyyy" 
    name="from_date" [(ngModel)]="callListRequestOb.from_date" maxlength="150">
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

test.component.ts

callListRequestOb={
    from_date: new Date()
}