Angular: объединить два элемента mat-error в один

Question

Я довольно новичок в Angular, и я следовал инструкциям на их официальном сайте. Из интереса я поиграл, и я хочу спросить, есть ли возможность объединить обработку ошибок (сделано с Angular Material), когда пользователь вводит ее / его почту. В зависимости от того, какой код ошибки происходит, я отображаю другое сообщение об ошибке.

errorHandling = (control: string, error: string) => {
  return this.checkoutForm.controls[control].hasError(error);
}

<div>
 <mat-form-field>
  <input matInput placeholder="Enter your email" formControlName="email">
   <!-- How to combine these two mat-error elements to one? -->
   <mat-error *ngIf="errorHandling('email', 'required')">
    Enter email
   </mat-error>
   <mat-error *ngIf="errorHandling('email', 'email')">
    Invalid email
   </mat-error>
 </mat-form-field>
</div>

Answer 1

Обычно вы можете сделать функцию. эта функция может получить первую ошибку из всех ошибок

  getError(control:AbstractControl)
  {
        let error=null;
        if (control.errors)
        {
          const firstKey = Object.keys(control.errors)[0];
          switch (firstKey)
          {
              case 'required':
                 error={error:'required'}
                 break;
              case 'minlength':
                 error={error:' is required '+control.errors.minlength.requiredLength+' characteres'}
                 break;
              case 'pattern':
                 error={error:' don\'t match with pattern'}
                 break;
              case 'maxlength':
                 error={error:' is required less than '+control.errors.maxlength.requiredLength+' characteres'}
                 break;
          }
        }
        return error
    }

Затем

   <mat-error >
     getError(form.get('email')?.error)
   </mat-error>

Или перебрать все ошибки

  getError2(control:AbstractControl)
  {
        let error=[];
        if (control.errors)
        {
          Object.keys(control.errors).forEach(firstKey=>{
          switch (firstKey)
          {
              case 'required':
                 error.push({error:'required'})
                 break;
              case 'minlength':
                 error.push({error:' is required '+control.errors.minlength.requiredLength+' characteres'})
                 break;
              case 'pattern':
                 error.push({error:' don\'t match with pattern'})
                 break;
              case 'maxlength':
                 error.push({error:' is required less than '+control.errors.maxlength.requiredLength+' characteres'})
                 break;
          }
          })
        }
        return error.length?error.map(x=>x.error).join(','):null
        //we can return the array too
        // return error.length?error:null
    }

И написать

<mat-error >
   {{getError2(userAddressValidations.get('firstName'))}}
</mat-error>

//if we received  an array
<mat-error >
  <ul>
  <li *ngFor="let error of getError2(userAddressValidations.get('firstName'))">
  {{error.error}}
  </li>
  </ul>
</mat-error>

См. Stabblitz

Answer 2

Вы можете просто проверить, существует ли объект errors в элементе управления формы. Если есть какие-либо ошибки, то это будет действительный объект с каждым ключом, ссылающимся на ошибку. Если ошибок нет, то это будет значение null.

<div>
 <mat-form-field>
  <input matInput placeholder="Enter your email" formControlName="email">
   <!-- Just check if the errors object exists on the form control -->
   <mat-error *ngIf="checkoutForm.controls['email'].errors">
    Combined error message
   </mat-error>
 </mat-form-field>
</div>