Angular & Typescript - “输入”字段中的日期输入验证

Question

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

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

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

在 JQuery 和 JavaScript 中有几种可用的解决方案。但是我不能在我的 Angular+TypeScript 程序中使用 JQuery 和 JavaScript。

验证 Date 的输入字段的方法是什么，这样用户将无法在输入字段中输入除了 Typescript 中的有效日期之外的任何内容?

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

app.component.ts：

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

我得到的错误是：

[ts] - 类型“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;
    }
 }