从html调用TypeScript函数时，它将循环更多时间

Question

在angular中，我创建了hasError函数来覆盖组件中的所有验证案例。 当我尝试在html中使用它时，我发现它在循环中进入了更多次 然后触发验证。

我需要知道为什么会出现这种循环。

我的打字稿功能

  hasError(input) {
    if (input == "email") {
      if (this.loginForm.controls['email'].hasError('required')) return 'Validation.emailRequired';
      if (this.loginForm.controls['email'].hasError('email')) return 'Validation.invalidEmail';

      else return '';
    }
    if (input == "password") {
      if (this.loginForm.controls['password'].hasError('required')) return 'Validation.passwordRequired';

      else return '';
    }
  }

我的HTML

        <mat-form-field>
          <i class="far fa-envelope"></i>
          <input matInput [placeholder]="'Login.Email'|translate"  formControlName ="email">
          <mat-error *ngIf="!loginForm.controls['email'].valid">
              {{hasError('email')|translate}} // i'm using it here 

          </mat-error>
        </mat-form-field>