Question

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

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

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

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

验证日期的输入字段的方法是什么，这样用户将无法在输入字段中输入 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：##}，

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

e.g。在提交中，您可以

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＆amp;打字稿 - “输入”字段中的日期输入验证

1 个答案: