Как проверить минимальное значение (возраст) в шаблоне angular?

Question

Как видно из заголовка, мне нужна проверка на минимальное значение. Я пробовал следующее:

      <mat-form-field class="w-100">
        <input matInput type="number" required placeholder="Age" #age="ngModel" ngModel name="age" min="50"/>
        <mat-error *ngIf="age.errors?.required">Age is required.</mat-error>
        <mat-error *ngIf="age.errors?.min">You have to be at least 50 to join.</mat-error>
      </mat-form-field>

Answer 1

Атрибут

min html на входе не вызывает ошибок по возрасту, но ввод становится недействительным.

с помощью formControl решит эту проблему.

    <input matInput  type="number" required placeholder="Age"  name="age" min="50"  ngModel [formControl]="ageControl"/>

   <div *ngIf="ageControl.errors?.min">You have to be at least 50 to join.
  </div>

// in ts
this.ageControl= new FormControl("", [ Validators.min(50)])

Я создал репо stackblitz для того же самого. Удалите formcontrol и обратите внимание, что ввод становится красным, когда значение меньше 50, но ошибки не выдается.

Answer 2

вы уже добавили min = "50", поэтому пользователь не может ввести не менее 50. Min - это ограничение на ввод, а не ошибка, поэтому вам может потребоваться добавить собственный валидатор и связать его с вашим вводом, как в этом ссылка и пользовательская ошибка для вывода вашего пользовательского сообщения.