小编M.R*_*eza的帖子

我正在验证一个简单的 Angular Material 日期选择器。这很奇怪，因为当我点击小日历时它工作正常，但只要我点击输入字段并在选择日期之前，颜色就会变成红色，如下所示：

这是标记模板：

    <mat-form-field class="datePicker">
        <input matInput [matDatepicker]="picker" (click)="picker.open()" readonly=true
            placeholder="Choose a date range" formControlName="dateRange">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

这是打字稿：

export class TrackingPanelComponent {


  toppingList: string[] = ['Machine A', 'Machine B', 'Machine C', 'Machine D'];

  constructor(private fb: FormBuilder) { }

  formGroup = this.fb.group({
    selectMachine: [null, Validators.required],
    dateRange: [null, Validators.required],
    trackingPath: [false],
    latestPosition: [false]
  })

  clearAll(){
    this.formGroup.reset()
  }
}

我知道这是因为(click)="picker.open()"但我需要保留它以更轻松地打开日期选择器。任何想法来解决它？