Javascript 如何在键入自身时实时应用验证[Typescript]

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

：但他们正在使用jquery 实际的项目太复杂了，但我试着用它来创建一个最小的问题陈述。我想验证实时输入的日期。我用这个时刻来验证。我创建了一个自定义验证方法，该方法在keydown=triggerValidate时调用。内部值有几个检查：

格式应仅为MM-DD-YYYY。 日期不得少于2015年1月1日。 日期不得超过2020年12月31日。 我还创建了一个。但让我解释一下我的逻辑

有一个全局变量isDateValid:boolean，它在validate方法中相应地设置。如果为false，则将调用addInvalidStyle，这将使边框动态变为红色。如果是真的，那么将调用removeInvalidStyle，它将删除然后应用动态css并将输入字段设置回正常。这是我的密码：

timeselector.component.html

timeselector.component.css

---

或者你可以直接看到这个。我的问题是，当我使用keydown时，我必须按一些键来验证我的日期。即使输入的日期正确，我也必须按enter键触发，否则它将继续显示红色警报。请帮帮我。如果不使用任何类型的表单，这是否可以实现。

您好，我已经阅读了评论，如果您不想更改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。

大家好，这个问题有什么问题吗。这是可行的还是我在浪费每个人的时间。大家好，我也试过了：我建议在Angular中使用ReactiveForms。然后，您可以使用现有的验证器或编写自己的验证器，并将它们应用于表单中的每个控件，这些控件将在您键入时进行验证。@Chrillewoodz，噢，不。对不起，我不能这样做。这个stackblitz只是实际项目的一个摘录。我不能做那些改变-@克里尔伍兹。在现有代码中不涉及html是不可能的吗？这正如预期的那样工作，但请您解释一下，因为我会向我的技术负责人证明这一点。提前感谢。DoCheck检查组件中的所有更改，因此当您键入它时，将同时进行验证。

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;
    }
}

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

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);
  }