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

有关如何禁用日期选择器或仅禁用日期选择器的详细说明，请参见官方文档：

https://material.angular.io/components/datepicker/overview#disabling-parts-of-the-datepicker

Answer 2

我假设一旦幻灯片打开，您就想禁用datepicker。我在stackblitz上简化了代码。看一下app/datepicker-overview-example.ts所在的文件setMaxExpirationDate。只需将变量更改为切换值即可。您需要将变量添加到日期选择器的disabled属性中，就像在文件app/datepicker-overview-example.html中看到的那样。

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

请仔细阅读Typescript，Angular和Angular Material的基础知识，这里有很多使用方法和指南，大量文档和示例项目。完成这些步骤，因为它们将帮助您自己理解和解决诸如此类的小问题。

编辑：我忘了提一下，在您的代码中，日期选择器无论如何都是readonly，因此应该没有一种编辑方法，如果希望用户能够使用日期选择器并更改其值。

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

2 个答案: