Angular & Typescript - Проверка ввода даты в поле «Ввод» - PullRequest
Новая
       19

Angular & Typescript - Проверка ввода даты в поле «Ввод»

0 голосов
/ 27 апреля 2018

Моя программа Angular5 содержит поле input для ввода даты. Я использую NgbDateStruct и NgbCalendar из ng-bootstrap . Несмотря на наличие календаря для выбора даты, когда пользователь вручную вводит данные в поле даты, он не проверяется.

То есть в поле ввода, отведенном для ввода даты, пользователь не должен иметь возможности вводить текстовые или мусорные данные. Но прямо сейчас пользователь может вводить любые данные.

Чтобы выполнить эту проверку на стороне клиента, я попытался использовать <input type = "date">, но input type = date не поддерживается в IE 11 и более ранних версиях.

В JQuery и JavaScript было доступно несколько решений. Но я не могу использовать JQuery и JavaScript в моей программе Angular + 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] - Свойство 'match' не существует для типа 'NgbDateStruct'

где this.fromDate - ввод даты, которую я получаю из представления.

HTML: 

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

1 Ответ

0 голосов
/ 27 апреля 2018

Штеффи, ваша переменная 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;
    }
 }
...