Angular - 切换开关后禁用日期选择器

Question

我正在使用棱角分明的材料。我想在切换滑动切换后禁用日期选择器。

我的日期选择器上传表单：

<form #uploadForm="ngForm" (keydown.enter)="$event.preventDefault()" (ngSubmit)="upload(uploadForm.valid)">
  <div class="input-wrapper">
    <mat-form-field>
      <input
        id="date"
        name="date"
        [(ngModel)]="model.date"
        [disabled]="uploadForm.submitted"
        [matDatepicker]="datepicker"
        [matDatepickerFilter]="dateFilter"
        [min]="minDate"
        [max]="maxDate"
        placeholder="Expiration date"
        #date="ngModel"
        autocomplete="off"
        matInput
        readonly
        required />
      <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
      <mat-datepicker touchUi #datepicker></mat-datepicker>
    </mat-form-field>
    <div class="tooltip" *ngIf="model.file && date.invalid">This field is required.</div>
    <mat-slide-toggle
      (change)="setMaxExpirationDate($event)">Set expiration date to 90 days</mat-slide-toggle>
  </div>

现在，滑动切换仅在我的应用中设置最大过期日期。我还想在切换后禁用日期选择器。我怎样才能做到这一点？

Answer 1

我假设您想在幻灯片打开后禁用datepicker。我在 stackblitz 上制作了您的代码的简化版本。查看您的setMaxExpirationDate 所在的文件app/datepicker-overview-example.ts。只需将变量更改为切换的值。 您需要将变量添加到日期选择器的 disabled 属性中，如文件 app/datepicker-overview-example.html 中所示。

这是我的堆栈闪电战： https://stackblitz.com/edit/angular-8x48eo

请阅读 Typescript、Angular 和 Angular Material 的基础知识，这里有很多操作指南和指南，还有很多文档和示例项目。完成这些，因为它们将帮助您了解并自行解决此类小问题。

编辑：我忘了提一下，在您的代码中，日期选择器无论如何都是readonly，所以不应该有编辑它的方法，如果您希望用户能够使用日期选择器和改变它的价值。