Лучший и эффективный способ показать сообщение об ошибке в угловых реактивных формах без использования нескольких *ngIf

Question

Я проверил свою форму, используя реактивную проверку формы, используя пакет @rxweb в своей форме, и я хочу показать сообщение об ошибке без кратных *ng. Если я ссылался на связанный с этим вопрос, но я не смог найти правильное решение своего вопроса

Вот мой код component.html:

    <div [formGroup]="userForm">
      <div>
    <input type="text" formControlName="firstname"/>
        <div *ngIf="userForm.controls.firstname.errors && 
   userForm.controls.firstname.errors.required"
        class="alert alert-danger">
          This field is Required
        </div>
        <div *ngIf="userForm.controls.firstname.errors && userForm.controls.firstname.errors.maxLength"
        class="alert alert-danger">
          max length 10
        </div>

        <div *ngIf="userForm.controls.firstname.errors && userForm.controls.firstname.errors.minLength"
        class="alert alert-danger">
          minimum length is 5
        </div>
    </div> 

Я не хочу писать несколько условий *ngIf. Есть ли другой способ эффективно показывать сообщения об ошибках конфигурации реактивной формы?

Answer 1

Установите все сообщения об ошибках в глобальной переменной, а имя свойства должно совпадать с именем ошибки

                         errorMessages = {
                           required: 'This field is Required',
                           maxLength: 'max length 10',
                           minLength: 'minimum length is 5'
                          }
                          errorMessage = '';

вызовите функцию ниже, когда вы хотите показать ошибку

                 showErrors() {
         this.errorMessage = '';
         var errorName = Object.keys(userForm.controls.firstname.errors);
         this.errorMessage = this.errorMessages[errorName[0]];
            } 

измените свой HTML, как показано ниже

           <div [formGroup]="userForm">
           <div>
         <input type="text" formControlName="firstname"/>
        <div *ngIf="userForm.controls.firstname.errors"
         class="alert alert-danger">
        {{errorMessage}}
       </div>
     </div>