html - 已禁用 Datepicker 已验证

问题描述

我有一个带有多个输入的表单类。有一个复选框，它基于布尔变量 (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>

标签： htmlangulardatepickerangular-material

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

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

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

html - 已禁用 Datepicker 已验证

问题描述

解决方案

推荐阅读