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

Я проверил свою форму, используя проверку реактивной формы с использованием пакета @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 Есть ли другой способ эффективно отображать сообщения об ошибках конфигурации реактивной формы?


angular-validation
person Avni Patel    schedule 07.01.2019    source источник
comment
Перейдите по этой ссылке: stackoverflow.com/questions/53920271/   -  person Ami Vyas    schedule 09.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

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

                         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>
person Dharan    schedule 08.01.2019