Как применить проверку в режиме реального времени при наборе текста [Typescript]

Question

Я новичок в Angular. Ближайший вопрос, который я нашел, был:

1. Проверка html ввода текста в том виде, в котором он напечатан : Но они используют jquery

Фактически проект слишком сложный, но я попытался создать из него минимальное изложение проблемы. Я хочу проверить дату, как она введена в режиме реального времени. Я использую moment для проверки. Я создал пользовательский метод validate(), который вызывается на (keydown)="triggerValidate()". Внутри value() есть несколько проверок:

1. Формат должен быть MM-DD-YYYY.
2. Дата не должна быть меньше 1 января 2015 года.
3. Нет дата должна быть выше 31-го декабря c, 2020 г.

Я также создал stckblitz . Но позвольте мне объяснить мою логику c.

. Существует глобальная переменная isDateValid: boolean, которая устанавливается соответствующим образом в методе validate(). Если это false, то будет вызван addInvalidStyle(), что сделает динамически красную границу. И если это true, то будет вызван removeInvalidStyle(), который удалит, затем применяет Dynami c 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 ()".