Валидация в формах с угловым: как показать конкретные ошибки для разных недопустимых случаев?

Question

У меня есть форма, которая проверяет все входные данные. Например, для ввода 'username' я хочу убедиться, что это первое и второе обязательные поля, что его длина не меньше 2 или больше 10 (или соответствует другому шаблону, который я использую).

Я бы хотел показать ошибку, если любая из проверок не пройдена. Как мне это сделать, если я хочу показать конкретную ошибку для каждого конкретного случая? Например: если вход пуст, покажите «обязательный», если значение неправильное, покажите «недействительный». Вот мой код:

компонент:

companyNamePattern = "^[a-z0-9_-]{8,15}$";
pwdPattern = "^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{6,12}$";
emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";

this.addCompForm = fb.group({
  'companyName':     [null,Validators.compose([Validators.required,Validators.minLength(5),Validators.maxLength(20)])],
  'companyPassword': [null,Validators.compose([Validators.required,Validators.minLength(5),Validators.maxLength(20)])],
  'companyEmail':    [null,Validators.compose([Validators.required,Validators.email])]
})

HTML:

<form [formGroup] ="addCompForm" (ngSubmit) = "addCompany(addCompForm.value)">
    <p>Enter the company name:</p>
    <input type="text" formControlName="companyName" >
    <div class="alert" *ngIf="!addCompForm.controls['companyName'].valid && addCompForm.controls['companyName'].touched" >{{nameAlert}}</div>

    <p>Enter the company password:</p>
    <input type="text" formControlName="companyPassword">
    <div class="alert"  *ngIf="!addCompForm.controls['companyPassword'].valid && addCompForm.controls['companyPassword'].touched " >{{passAlert}}</div>

    <p>Enter the company email:</p>
    <input type="text" formControlName="companyEmail">
    <div class="alert"  *ngIf="!addCompForm.controls['companyEmail'].valid && addCompForm.controls['companyEmail'].touched " >{{emailAlert}}</div>
    <br>
    <br>
    <div class="btn-container">
        <button type="submit" [disabled]="!addCompForm.valid">
            <i class="material-icons">done</i>
        </button>
    </div>
</form>

Answer 1

*ngIf="addCompForm.get('companyName').hasError('required')

добавьте это поле к обязательному полю и

*ngIf="addCompForm.get('companyName').hasError('minLength')

добавить это для создания minLength и так же, как для максимальной длины .hasErro ('maxlength')