Проверка времени (время от времени)

Question

Я использовал [мин] для проверки времени (время от времени), когда время сброса должно быть больше времени срабатывания.

Мой HTML код показан ниже

<form #addForm="ngForm" required autocomplete="off">
  <mat-card>
    <table>
      <thead>
        <tr>
          <th>Pickup Time</th>
          <th>Drop Time</th>
        </tr>
      </thead>
      <tbody ngModelGroup="stageForm">
        <tr *ngFor="let item of stageListData;">
          <td class="col-md-1">
            <mat-form-field class="example-full-width">
              <input matInput [(ngModel)]="item.pickupTime" name="pickupTime" type="time"
                autocomplete="off" [disabled]="FieldReadonly" required>
            </mat-form-field>
          </td>
          <td class="col-md-1">
            <mat-form-field class="example-full-width">
              <input matInput [(ngModel)]="item.dropTime" name="dropTime" [min]="item.pickupTime"
                 type="time" autocomplete="off" [disabled]="FieldReadonly" required>
              <mat-error *ngIf="addForm.controls['dropTime']?.errors?.required">
                {{labels.value}}
              </mat-error>
            </mat-form-field>
          </td>
        <tr>
      <tbody>
    </table>
  <mat-card>
</form>

Но это не проверка. Кто-нибудь может предложить решение для этого?

Спасибо.

Answer 1

<SCRIPT TYPE="text/JavaScript">
function validateHhMm(inputField) {
    var isValid = /^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$/.test(inputField.value);

    if (isValid) {
        inputField.style.backgroundColor = '#bfa';
    } else {
        inputField.style.backgroundColor = '#fba';
    }

    return isValid;
}

<FORM METHOD="POST">
<input type="text" onchange="validateHhMm(this);" />

использовал этот код ....

Answer 2

Вы можете сделать что-то похожее на то, что я сделал, чтобы убедиться, что «дата окончания» возникает после представления «дата начала». Я использую Angular Reactive Forms, поэтому создайте FormGroup, содержащую ваше более раннее и более позднее время. Очевидно, переведите этот метод с даты на время.

Этот блок кода ниже создает FormGroup с именем 'date' с помощью FormControls 'startDate' и 'endDate'. Должен быть в файле .ts.

date: this.fb.group({
   startDate: ['', [Validators.required]],
   endDate: ['', [Validators.required]],
}, {validator: this.endDateAfter}),

Вы можете получить к нему доступ в angular формах html, используя [formGroup]="date" в элементе верхнего уровня <form> и используя formControlName="startDate" в своем вводе поле внутри формы.

Теперь, валидатор - это то место, где происходят маги c. Я создал validator.ts, где находится валидатор. Это логика c для валидатора.

export function EndDateAfterSelectedStartDate(group: FormGroup) {
  const startDate = group.get('startDate').value;
  const endDate = group.get('endDate').value;

  if (endDate <= startDate) {
    console.log('Invalid End Date');
  }

  return endDate > startDate ? null : { EndDateBeforeSelectedStartDate: true }
}

Обратите внимание, что валидатор экспортирован. Импортируйте его в свой файл .ts, используя нечто подобное:

import { EndDateAfterSelectedStartDate } from 'src/app/validators/CustomValidators';

Внутри вашего класса создайте переменную: endDateAfter = EndDateAfterSelectedStartDate;, которая является переменной, используемой в валидаторе для элемента управления формы выше.

Вы можете сделать то же самое с объектами Time, я использовал встроенный объект Date для этого проекта.