根據輸入啟用/禁用按鈕

Question

我有一個用於選擇日期的輸入字段。 我想應用簡單的驗證，如果此字段為空，則提交按鈕應在填充時禁用並啟用，並且應保持同步。

日期字段有一些問題，當我通過 ng-valid 檢查時，如果沒有在日期字段中輸入任何內容，它應該給出 false，但它從一開始就給出 true。

我使用 StackBlitz 創建了一個簡單的示例，它具有單個日期輸入，現在我需要在輸入字段為空時禁用它，並在輸入填充時激活它。

https://stackblitz.com/edit/ngx-daterangepicker-material-for-angular8-5ikovy?file=src/app/app.component.html

Answer 1

這是由於日期選擇器部分的執行不力。 默認情況下，他們將控件的值設置為{start: null, end: null} 。 https://stackblitz.com/edit/ngx-daterangepicker-material-for-angular8-fa73zq?file=src/app/app.component.html

默認的required驗證器檢查controlValue == null以及由庫設置為控件的對象是否不是 null-ish。 如果你需要使用這個庫，你需要編寫你的自定義驗證器來檢查start和end是否都為空，如果是，它應該返回一個錯誤。

你在這里檢查如何做到這一點： https ://angular.io/guide/form-validation#adding-custom-validators-to-template-driven-forms

Answer 2

默認情況下，當您的輸入日期為空時，其值為{ "start": null, "end": null } 。 所以“必需”驗證器不會使值無效，因為這是一個有效的對象。

一個簡單的修復方法：

<button
  [disabled]="!(date.value.start && date.value.end)"
>...</button>

Answer 3

正如其他人所提到的，這是由於值為{ start: null, end: null } 。 您可以通過創建自定義驗證器來解決此問題 - 這樣做的好處是您的表單的有效狀態將是正確的。

您可以將驗證器定義為如下指令（您的日期選擇器包中可能已經存在一個接口，因此可能不需要該部分）：

interface DateRange {
  start: Moment | null;
  end: Moment | null;
}

@Directive({
  selector: '[appDateRange]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: DateRangeValidatorDirective,
      multi: true,
    },
  ],
})
export class DateRangeValidatorDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    return this.dateRangeValidator(control);
  }

  dateRangeValidator: ValidatorFn = (
    control: AbstractControl
  ): ValidationErrors | null => {
    if (!control.value) return null;
    const dateRange = control.value as DateRange;
    console.log('VALIDATE', dateRange);
    return dateRange.start && dateRange.end ? null : { dateRange: true };
  };
}

確保在你的模塊中也定義這個：

@NgModule({
  declarations: [
    ...
    DateRangeValidatorDirective
  ]
  ...
})

然后，您可以使用它，就像使用指令選擇器（ appDateRange ）對輸入required的驗證器一樣：

<input ... appDateRange>

所以你的按鈕上可以有：

<button ... [disabled]="date.errors?.required && date.errors?.dateRange"> ...

如果您想了解更多相關信息，這里有一個很好的示例https://angular.io/guide/form-validation ，頁面上的禁止名稱驗證器。