通过将其用作变量来检查表单控件输入是否有错误
checking form control input for errors by using it as a variable
我正在使用 angular 8 和 angular material 编写我的网站。
我创建了一个带有 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>
在组件的 class 中,我实现了 hasError()
函数,如下所示:
public hasError = (controlName: string, errorName: string) =>{
return this.queryForm.controls[controlName].hasError(errorName);
}
当然,我将 queryForm
变量配置为由表单生成器创建的组。
有没有办法在不从 class 本身调用函数的情况下检查错误?
自从我将 #timezone
添加到输入字段后,我假设我将能够执行以下操作:
<mat-error *ngIf="timezone.hasError('required')">timezone required!</mat-error>
但我不能! :)
我更愿意使用类似的东西,因为我想创建一个带有一些垫错误的错误处理组件,这样我就可以在每个输入字段中重用它,我想将输入控件粘贴到它而不是整个表单组。
如能提供有关此问题的任何信息,我们将不胜感激。
谢谢!
你知道如果字段有一个唯一的验证器,你可以简单地使用
<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;
}
我正在使用 angular 8 和 angular material 编写我的网站。
我创建了一个带有 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>
在组件的 class 中,我实现了 hasError()
函数,如下所示:
public hasError = (controlName: string, errorName: string) =>{
return this.queryForm.controls[controlName].hasError(errorName);
}
当然,我将 queryForm
变量配置为由表单生成器创建的组。
有没有办法在不从 class 本身调用函数的情况下检查错误?
自从我将 #timezone
添加到输入字段后,我假设我将能够执行以下操作:
<mat-error *ngIf="timezone.hasError('required')">timezone required!</mat-error>
但我不能! :)
我更愿意使用类似的东西,因为我想创建一个带有一些垫错误的错误处理组件,这样我就可以在每个输入字段中重用它,我想将输入控件粘贴到它而不是整个表单组。
如能提供有关此问题的任何信息,我们将不胜感激。
谢谢!
你知道如果字段有一个唯一的验证器,你可以简单地使用
<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;
}