Как создать пользовательский валидатор, который отображает собственное сообщение об ошибке?

Question

У меня есть интерфейс Angular, который использует настраиваемый валидатор, чтобы обеспечить, чтобы компонент в p-диалоге имел значение от 0 до 10.

Валидатор работает просто отлично, поскольку он не позволяет пользователю отправить форму, если поле содержит значение, которое не находится между 0 и 10. Если пользователь вводит значение, например, 11, поле становится красным, а кнопка отправки выключен.

Однако я также хотел бы показать пользователю сообщение о том, почему он не может отправить. Что-то вроде "Вы должны ввести значение от 0 до 10"

Это HTML-код:

      <p-dialog header="My Dialog">
  <form [formGroup]="createForm">
    <ng-container>
  
      <input
        id="age"
        pInputText
        maxlength="30"
        formControlName="age"
        [style]="{width: '25vw'}">

    </ng-container>
  </form>
</p-dialog>

Это моя функция ngOnInit:

      ngOnInit() {
    super.ngOnInit();
    this.createForm = this.fb.group({
      'age' : new FormControl(null, [this.ageRangeValidator])
    });
}

И это моя функция проверки:

      ageRangeValidator(control: AbstractControl): { [key: string]: boolean } | null {

    if (control.value !== undefined && (isNaN(control.value) || control.value < 0 || control.value > 10)) {
        return { 'ageRange': true };
    }
    return null;
}

Answer 1

Упрощенный способ будет выглядеть примерно так:

      <p-dialog header="My Dialog">
  <form [formGroup]="createForm">
    <ng-container>
  
      <input
        id="age"
        pInputText
        maxlength="30"
        formControlName="age"
        [style]="{width: '25vw'}">
      <span *ngIf="age.errors?.ageRange">Age Range Specific Error Message</span>
    </ng-container>
  </form>
</p-dialog>

После запуска проверки возраст FormControl должен затем установить ValiationErrors в свойство errors .

Иногда это приводит к вопросу, как мне не показывать это сообщение об ошибке, пока пользователь не попытается изменить его значение:

            <span *ngIf="age.dirty && age.errors?.ageRange">Your Error Message</span>

(это предполагает, что вы выставляете элемент управления непосредственно на свой компонент:)

      public age: FormControl;
ngOnInit() {
    super.ngOnInit();
    this.age = new FormControl(null, [this.ageRangeValidator]); 
    this.createForm = this.fb.group({
      'age' : this.age,
    });
}