javascript - 如何在打字时实时应用验证 [Typescript]

Question

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

1. Validate html text input as it's typed :但他们正在使用jquery

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

1. 格式只能为 MM-DD-YYYY。
2. 日期不得早于 2015 年 1 月 1 日。
3. 日期不得早于 2020 年 12 月 31 日。

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

有一个全局变量 isDateValid: boolean ，它在 validate() 方法中进行相应设置。如果为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;
}

或者直接看这个stackblitz 。我的问题是，当我使用 keydown 时，我必须按某个键来验证我的日期。即使输入的日期正确，我也必须按 Enter 才能触发，否则它将继续显示红色警报。请帮我。如果不使用任何类型的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()"。