CODEWITHSUNDEEP
angularangular-material
Baruch_Mashasha
Baruch_Mashasha

Reputation: 207

Disable input on matDatePicker [Angular Material]

Hey i have input date picker from angular material and i try to make the value disable and let the user choose only from the date picker Calendar and it doesn't work for me.

This is my input:

<p class="p-rtl">
    <mat-form-field class="input-min" appearance="fill">
        <mat-label>Finish Date</mat-label>
        <input matInput [matDatepicker]="picker" placeholder="Choose a date" [formControl]="date">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
</p>

The problem is that the user can insert bad inputs and i want to block the user for this inputs.

I try to google it and read reference and nothing not work for me.

enter image description here

Upvotes: 0

Views: 12232

Answers (2)

Keya Ghosh
Keya Ghosh

Reputation: 1

Instead of disabling the entire form you can disable like below

<p class="p-rtl">
    <mat-form-field class="input-min" appearance="fill">
        <mat-label>Finish Date</mat-label>
        <input matInput [matDatepicker]="picker" placeholder="Choose a date" [formControl]="date" disabled>
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker  disabled="false"></mat-datepicker>
    </mat-form-field>
</p>

Upvotes: 0

Shifenis
Shifenis

Reputation: 1125

If you are trying to disable your input with disabled in HTML component you have a warning in console (reactive form).

To be able to avoid this, you can disable a FormControl with 

 date: new FormControl({value: null, disabled: true})

Then to be sure that the user can't write anything you can put readonly attribute in the template

<p class="p-rtl">
    <mat-form-field class="input-min" appearance="fill">
        <mat-label>Finish Date</mat-label>
        <input matInput readonly [matDatepicker]="picker" placeholder="Choose a date" [formControl]="date">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
</p>

Upvotes: 5

Related Questions