Question

我正在使用角度8和角度材料来编写我的网站。

我有一个创建了formGroup的表单，并且希望能够使用*ngIf通过将实际输入元素用作参数来检查验证错误。

当前，这是我的工作代码：

我的格式如下：

<form [formGroup]="queryForm" (submit)="runQuery()">
...
  <mat-form-field>
            <input matInput #timezone placeholder="Timezone" aria-label="Timezone" formControlName="timePeriodTimeZone"/>
            <mat-hint>timezone as a number</mat-hint>
            <mat-error *ngIf="hasError('timePeriodTimeZone','required')">timezone required</mat-error>
        </mat-form-field>
...
</form>

，并且在组件的类中，我实现了hasError()函数，如下所示：

 public hasError = (controlName: string, errorName: string) =>{
    return this.queryForm.controls[controlName].hasError(errorName);
  }

当然，我将queryForm变量配置为由表单构建器创建的组。

是否可以在不从类本身调用函数的情况下检查错误？

自从我将#timezone添加到输入字段以来，我假设我将能够执行以下操作：

<mat-error *ngIf="timezone.hasError('required')">timezone required!</mat-error>

但是我不能！：）

我宁愿使用类似的方法，因为我想创建一个带有一些mat-errors的错误处理组件，所以我将能够在每个输入字段中重用它，并且我想将其粘贴到输入控件上，而不是整个表单组。

有关此问题的任何信息将不胜感激。

谢谢！

Answer 1

您知道，如果该字段具有唯一的验证器，则可以简单地使用

<mat-error>timezone required!</mat-error>

（不需要* ngIf）。

如果您希望控制错误，则可以使用

<mat-error >{{getError('timezone')}}</mat-error>

您拥有类似

的功能

getError(field:string)
{
   const control=this.myForm.get(field);
   string error=''
   switch (field)
    case 'timezone':
       error=control.hasError('required')?'time zone required':
              control.hasError('other')?' other error':''
    break;
    case '....'
   }
   return error;
}

通过将其用作变量来检查表单控制输入是否有错误

1 个答案: