如何在键入自身时实时应用验证 [打字稿]

Question

我是Angular的新手。我发现的最接近的问题是：

1. 在键入时验证 html 文本输入：但他们使用的是jquery

实际项目太复杂了，但我尝试从中创建最小的问题陈述。我想验证实时输入的日期。我正在使用moment进行验证。我创建了一个自定义validate()方法，该方法在(keydown)="triggerValidate()"上调用。在value()内部有几项检查：

1. 格式应仅MM-DD-YYYY。
2. 日期不得少于 2015 年 1 月 1 日。
3. 任何日期都不应超过 2020 年 12 月 31 日。

我也创建了一个stckblitz。但让我解释一下我的逻辑。

有一个全局变isDateValid: booleanvalidate()方法中相应地设置。如果它是false则addInvalidStyle()将被调用，这将使边框动态变红。如果它是true，那么将调用removeInvalidStyle()它将删除然后应用动态 css 并将输入字段设置回正常。这是我的代码：

timeselector.component.html

<input [class.warning-border]="isApplied" [(ngModel)]="range" (keydown)="triggerValidate()"/>

timeselector.component.ts

import { ... } from '@angular/core';
import moment from 'moment';
@Component({
...
})
export class TimeselectorComponent {
isDateValid: boolean=true;
startingCalendarYear = 2015;
endingCalendarYear = 2020;
isApplied: boolean = false;
range;
triggerValidate() {
this.validate(this.range);
}
validate(range: string) {
this.isDateValid=true;
const myDate = moment(range, 'MM-DD-YYYY', true);
const lastDayOfCalendarYear = moment([this.endingCalendarYear]).endOf('year');
const firstDayOfCalendarYear = moment([this.startingCalendarYear]).startOf('year');
if (!myDate.isValid()) {
this.isDateValid=false;
this.addInvalidStyles();
}
if (myDate.isAfter(lastDayOfCalendarYear)) {
this.isDateValid=false;
this.addInvalidStyles();
}
if (myDate.isBefore(firstDayOfCalendarYear)) {
this.isDateValid=false;
this.addInvalidStyles();
}
if (this.isDateValid) {
this.removeInvalidStyles();
}
}
addInvalidStyles() {
this.isApplied = true;
}
removeInvalidStyles() {
this.isApplied = false;
}
}

timeselector.component.css

.warning-border {
border: 2.8px solid red;
padding-top: 0.8px !important;
padding-bottom: 3px !important;
}

或者你可以直接看到这个堆叠闪电战。我的问题是我必须按一些键来验证我的日期，因为我正在使用keydown.即使输入的日期正确，我也必须按回车键触发，否则它将继续显示红色警报。请帮助我。这是否可以在不使用任何类型的form的情况下实现。

Answer 1

嗨，我已经阅读了评论，如果您不想更改 html 代码 ，为了实现您的目标，您必须添加以下内容：

import { Component, DoCheck, ViewChild } from "@angular/core";
import moment from "moment";
@Component({
selector: "app-timeselector",
templateUrl: "./timeselector.component.html",
styleUrls: ["./timeselector.component.css"]
})
export class TimeselectorComponent implements DoCheck {
ngDoCheck(): void {
this.validate(this.range);
}

现在你可以删除(keydown(="triggerValidate(("。