Как запретить ввод будущей угловой даты 4

Question

Я хочу добавить встроенную проверку, чтобы запретить пользователю вводить будущую дату, например, если я добавлю 2022, я должен выдать ошибку, как будто вы добавили неправильную дату или что-то в этом роде

это мой HTML-код

<div class="form-group datepicker">
      <label for="dob">Date of Birth*</label>
      <div class="row input-group">
        <input
          ngbDatepicker
          #d="ngbDatepicker"
          #dobF="ngModel"
          class="form-control input-underline input-lg"
          id="dob"
          [(ngModel)]="dateOfBirth"
          placeholder="yyyy-mm-dd"
          name="dp"
          [ngClass]="{
            invalid:
              (dobF.value === null || isString(dobF.value)) && dobF.touched
          }"
          required
        />
        <div class="input-group-append">
          <button
            class="btn btn-outline-secondary calendar"
            (click)="d.toggle()"
            type="button"
          ></button>
        </div>
      </div>
      <div
        *ngIf="
          (dobF.value === null || isString(dobF.value)) && dobF.touched
        "
        class="error"
      >
        Please enter a valid date of birth.
      </div>
    </div>

это мой файл Ts

, где я определил dateOfBirth

public dateOfBirth: { year: number; month: number; day: number };
 constructor(
public router: Router,
public route: ActivatedRoute,
private modalService: NgbModal,
private store: Store<any>,
private authService: AuthService,
public config: NgbDatepickerConfig,
private duplicateFinderService: DuplicateFinderService
) 
{
const currentDate = new Date();
const day = currentDate.getDate();
const month = currentDate.getMonth() + 1;
const year = currentDate.getFullYear();
// customize default values of datepickers used by this component tree
this.config.minDate = { year: 1900, month: 1, day: 1 };
this.config.maxDate = { year, month, day };
// days that don't belong to current month are not visible
this.config.outsideDays = "hidden";
}

Я не могу найти какую-либо помощь в Интернете.Кто-нибудь может мне помочь?Спасибо

Answer 1

Поскольку вы используете ngbDatepicker, одним из вариантов является установка атрибута maxDate и добавление атрибута readonly.Таким образом, пользователи будут вынуждены использовать указатель даты и не вводить ничего непосредственно в поле ввода.

[maxDate]="maxDate" readonly