Angular 8 datepicker disable input to use only the calendar and submit button disabled

Question

In a reactive Angular form, I want to disable the input so the user only uses the calendar. I use this : HTML

<mat-form-field>
    <mat-label for="date">Starting date : </mat-label>
    <input matInput [matDatepicker]="date" [min]="startDate" placeholder="mm/dd/yyyy" formControlName="date" disabled>
    <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
    <mat-datepicker #date disabled="false"></mat-datepicker> <mat-error *ngIf="form.controls['date'].invalid">{{getErrorMessage('date')}}</mat-error>
</mat-form-field>

The submit button

<button type="submit" [disabled]="form.invalid">Create project</button>

TS

ngOnInit() {
  this.form = new FormGroup({
    date: new FormControl({ disabled: true, value: '' }, [Validators.required])
    })
}

It works (the input is disabled and the calendar works) but the problem is with my submit button. If another required field is empty the submit botton is disabled. But if the datepicker isn't used to select a date (and other required fields have an input) the submit button is not disabled.

I also have a warning message in the browser console : >

  It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
  when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
  you. We recommend using this approach to avoid 'changed after checked' errors.

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

>

Answer 1

Angular don't trigger validators for disabled fields. I think you can resolve your button problem changing input disable to readonly mode.

For example:

HTML

<mat-form-field>
    <mat-label for="date">Starting date : </mat-label>
    <input matInput [matDatepicker]="date" [min]="startDate" placeholder="mm/dd/yyyy" formControlName="date" readonly >
    <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
    <mat-datepicker #date disabled="false"></mat-datepicker> <mat-error *ngIf="form.controls['date'].invalid">{{getErrorMessage('date')}}</mat-error>
</mat-form-field>

TS:

ngOnInit() {
  this.form = new FormGroup({
    date: new FormControl( '' ,Validators.required])
    })
}

It's will resolve your problem with browser warnings, and required validations(i think).

Answer 2

As angular material docs says, to disable input button on a material date picker use:

<mat-form-field>
    <input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
    <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
    <mat-datepicker #dp3 disabled="false"></mat-
</mat-form-field>

And you done it right, but why you initialize the date with disable true?

date: new FormControl({ disabled: true, value: '' }, [Validators.required])

What @Leandro said is right, i also suggest to tweak the form making it all clickable for a proper user experience:

  <mat-form-field  >
    <input matInput [matDatepicker]="dp3" placeholder="Select a date" formControlName="date" readonly (click)="dp3.open()" style="cursor: pointer;">
    <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
    <mat-datepicker #dp3 disabled="false"></mat-datepicker>
  </mat-form-field>