已禁用 Datepicker 已验证答案

【问题标题】：Disabled Datepicker is validated已禁用 Datepicker 已验证
【发布时间】：2019-08-11 14:04:06
【问题描述】：

我有一个包含多个输入的表单类。有一个复选框，它基于布尔变量 (switchDate) 启用/禁用 Datepicker 输入（不需要 Datepicker）。即使 Datepicker 被禁用，它仍然会被验证并导致整个表单的状态无效。我的提交表单按钮条件是：[disabled]="productForm.invalid"。不幸的是，如果没有有效的 Datepicker 字段，此按钮将被禁用。

我的问题是：如何验证 Datepicker 字段仅是否启用？

PS 我是 Angular 的新手

我已尝试更改提交按钮禁用条件以关注其他字段错误，但这样它将传递 Datepicker 中的任何输入
我试图找到一些方法来检查 Datepicker 字段是否在提交按钮条件下启用/禁用，但这里没有运气

<input type="checkbox"
             name="switcherChk"
             id="switcherChk" 
             checked="true"
             (change)="changeDatepickerVisibility()" />

  <mat-form-field class="example-full-width">
      <input matInput [matDatepicker]="picker"
                      [min]="todaysDate"
                      placeholder="Example text"
                      formControlName="userDate"
                      [attr.disabled]="switchDate ? '' : null"
                      required = false
                      >
      <mat-datepicker-toggle matSuffix [for]="picker">
        <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
      </mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
      <mat-error *ngIf="productForm.controls['userDate'].invalid">
          Date should be greater or equal to current date.
        </mat-error>
    </mat-form-field>

【问题讨论】：

您是否尝试过使用响应式表单？这些将允许您动态添加和删除验证器。
我不知道这种可能性。我找到了一些关于你的提示的教程，我会尝试使用它。

标签： html angular datepicker angular-material

【解决方案1】：

以这种方式解决（在组件方面）：

  private changeUserDateValidators(): void{
    var dateControl = this.productForm.get(this.UserDateField);
    if (this.switchDate) {
      dateControl.setValidators(Validators.required);
    }
    else {
      dateControl.clearValidators();
    }
    dateControl.updateValueAndValidity();
}

根据您想要实现的目标，您可以将 Validators.required 替换为您的自定义验证器。

【讨论】：