Angular & Typescript - 'Input' 字段中的日期输入验证

Question

我的 Angular5 程序包括一个用于输入日期的 input 字段。我正在使用来自 ng-bootstrap 的 NgbDateStruct 和 NgbCalendar。虽然有一个日历，但为了选择日期，当用户手动输入日期字段时，它不会生效。

也就是说，在为输入日期分配的输入字段中，用户不应该能够输入文本或垃圾数据。但是现在，用户可以输入任何类型的数据。

为了进行此客户端验证，我尝试使用 <input type = "date">，但 input type = date 在 IE 11 和更早版本中不受支持。

JQuery 和 JavaScript 中提供了多种解决方案。但是我不能在我的 Angular+TypeScript 程序中使用 JQuery 和 JavaScript。

验证日期的输入字段的方法是什么，这样用户将无法在输入字段中输入除 [=41] 中的有效日期以外的任何内容=]打字稿?

我在 TypeScript 中尝试了以下解决方法，但最终出现错误：

app.component.ts:

validateDate() {
     const regExp = /^(\d{4})\/(\d\d?)\/(\d\d?)$/;
    if (((this.fromDate).toString()).match(regExp)) {
        console.log('Valid Date');
    }
}

我得到的错误是：

[ts] - Property 'match' does not exist on type 'NgbDateStruct'

其中 this.fromDate 是我从视图中收到的日期输入。

HTML:

<div class = "input-group date">
    <input class = "form-control" [(ngModel)] = "fromDate" ngbDatepicker #d = "ngbDatepicker" onmousedown = "validateDate()">
</div>

Answer 1

Steffi，你的变量 fromDate 是一个对象 {year:##,month:##,day:##}，

要检查日期是否有效，您只需询问年月日即可。

例如在提交中你可以做

submit()
{
    let validDate:boolean=this.fromDate.year && this.fromDate.month && this.fromDate.day
    let data={
       fecha:validDate?''+this.fromDate.year+'/'+this.fromDate.month+'/'+this.fromDate.day:null;
    }
 }

Angular & Typescript - 'Input' 字段中的日期输入验证

Angular & Typescript - Date input validation in the 'Input' field

date

typescript

ng-bootstrap

angular

angular5