Angular 5日期驗證（接受的最小值和最大值）

Question

我似乎無法找到一個簡單的解決方案，但我有這樣的日期輸入。

<input [(ngModel)]="toolDate" type="text" class="tool_input tool_input__date">

現在我使用https://nosir.github.io/cleave.js/來控制輸入，所以除了日期以外，您什么都不能寫，所以在我的app.component.ts中

export class ...
   toolDate = moment().format('DD/MM/YYYY');

ngOnInit() {
    const cleave = new Cleave('.tool_input__date', {
      date: true,
      datePattern: ['d', 'm', 'Y']
    });
}

所以我不需要日期格式驗證，但我需要最小日期和最大日期驗證。.因此，用戶不能輸入少於2017年1月1日的信息，並且不能輸入當前日期之后的日期

現在我知道默認情況下，您可以使用日期並設置最小值和最大值，但是我不想使用默認的html日期選擇器

任何幫助，將不勝感激！

謝謝

Answer 1

如下使用自定義功能來驗證日期。

HTML

<input type="date" class="form-control" formControlName="myDate">

組件：建立表單組時進行驗證

this.myFormGroup = this.formBuilder.group({
    'myDate': new FormControl('myDateVal', [Validators.required, isValidDate]),
});

驗證日期的實用程序方法。

export const isValidDate = (c: FormControl) => {
  const DATE_REGEXP = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
  return DATE_REGEXP.test(c.value) || c.value === '' ? null : {
    validateEmail: {
      valid: false
    }
  };
}