Показать подходящее сообщение об ошибке проверки

HTML

<form class="row" [formGroup] = "loginForm" (ngSubmit)="UpdateProfile()">
    <input type="text" formControlName="first_name" />
    <span 
        *ngIf="this.loginForm.controls.first_name != null 
                && this.loginForm.controls.first_name.errors != null">
        Please enter first name
    </span>
            
    <button type="submit" [disabled]="loginForm.invalid" class="btn btn-primary">
        Update Profile
    </button>
</form>

Сторона Js

this.loginForm = new FormGroup({
    first_name: new FormControl(this.userObj.first_name, [
        Validators.required, 
        Validators.minLength(3), 
        Validators.maxLength(20)
    ])
});

Сведения о проблеме

Есть ли способ определить, какой тип проверки был наложен. Как это было необходимо или минимальная длина или максимальная длина для отображения соответствующего сообщения

angular-cli angular13

10.04.2022 07:06

Формы c голосовым вводом в React с помощью Speechly

Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...

Flatpickr: простой модуль календаря для вашего приложения на React

Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....

В чем разница между Promise и Observable?

Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.

Что такое cURL в PHP? Встроенные функции и пример GET запроса

Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.

Четыре эффективных способа центрирования блочных элементов в CSS

У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поле ошибок под элементом управления будет иметь соответствующее сообщение об ошибке. Вы можете увидеть объект ошибки для лучшего понимания. Добавьте блок ниже в этот компонент формы, чтобы просмотреть ошибку:

{{ loginForm.controls.first_name.errors | json }}

Вы заметите, что объект ошибки меняется по мере того, как вы начинаете вводить текст в блоке ввода.

{ "required": true }

Затем он изменяется на минимальную ошибку проверки lin:

{ "minlength": { "requiredLength": 3, "actualLength": 2 } }

Затем он изменится на ошибку проверки max len:

{ "maxlength": { "requiredLength": 20, "actualLength": 25 } }

Таким образом, вы можете отображать различные сообщения об ошибках на основе этих сведений об ошибках. Смотри ниже:

  <span *ngIf="loginForm.controls.first_name.errors">
    <span *ngIf="loginForm.controls.first_name.errors?.required">
      Please enter first name
    </span>
    <span *ngIf="loginForm.controls.first_name.errors.minlength">
        First name must have at least 3 characters
    </span>
    <span *ngIf="loginForm.controls.first_name.errors.maxlength">
        First name must not be more than 20 characters
    </span>
  </span>

Можете ли вы предложить пример кода для их разбора в порядке требуемой, затем минимальной длины и, наконец, максимальной длины?

— 10.04.2022 07:33

@Pankaj, добавил.

— 10.04.2022 07:35

10.04.2022 07:27