title: Angular 8 datepicker disable input to use only the calendar and submit button disabled
body: <p>In a reactive Angular form, I want to disable the input so the user only uses the calendar.
  I use this :
  HTML</p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;mat-label for="date"&gt;Starting date : &lt;/mat-label&gt;
      &lt;input matInput [matDatepicker]="date" [min]="startDate" placeholder="mm/dd/yyyy" formControlName="date" disabled&gt;
      &lt;mat-datepicker-toggle matSuffix [for]="date"&gt;&lt;/mat-datepicker-toggle&gt;
      &lt;mat-datepicker #date disabled="false"&gt;&lt;/mat-datepicker&gt; &lt;mat-error *ngIf="form.controls['date'].invalid"&gt;{{getErrorMessage('date')}}&lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>The submit button</p>
  
  <pre><code>&lt;button type="submit" [disabled]="form.invalid"&gt;Create project&lt;/button&gt;
  </code></pre>
  
  <p>TS</p>
  
  <pre><code>ngOnInit() {
    this.form = new FormGroup({
      date: new FormControl({ disabled: true, value: '' }, [Validators.required])
      })
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>I also have a warning message in the browser console :
  ></p>
  
  <pre><code>  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)
    });
  </code></pre>
  
  <p>></p>