Angular error 与 hasError 的用法是什么？

Answer 1

errors

如果有任何错误或 null 则返回一个对象

hasError()

在给定的验证中返回一个布尔值

使用

errors

，您不需要知道可用的错误，您可以循环它们。

Answer 2

我制作了这个愚蠢的示例组件：

模板：

<input type="text" [formControl]="form">

<span *ngIf="form.errors?.['myError']">errors shows the span</span>
<span *ngIf="form.hasError('myError')">hasError shows the span</span>

{{ 'hasError value ' + form.hasError('myError')}}
<br>
{{ 'errors value ' + form.errors?.['myError']}}

打字稿：

@Component({
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './my-component.component.html',
})
export class MyComponentComponent {
  public form = new FormControl<any>('', (control: AbstractControl) => {
    const numberOfLetters = (control as FormControl).value.length;
    return numberOfLetters === 2 ? { myError: 0} : null;
  });

此代码从不显示跨度。

hasError

case 始终返回 false：

has error value false

；当 numberOfLetters 不为 2 时，

errors

case 返回

null

：

errors value null

；当 numberOfLetters 为 2 时，

0

：

errors value 0

如果验证器返回：

return numberOfLetters === 2 ? { myError: 'truthy' } : null;

那么当 numberOfLetters 不为 2 时，情况与之前相同。当 numberOfLetters 为 2 时，

hasError

case 返回

true

，

errors

case 返回

'truthy'

。

所以我的建议是使用

<span *ngIf="form.errors?.['myError'] !== null">errors shows the span if comparing to not null</span>

旧答案

在您给出的示例中，我没有看到任何区别，但您应该使用

<span *ngIf="myReativeForm.get('userDetails.email').hasError('required')">

为什么？

案例1：

myReativeForm.get('userDetails.email').errors['customError']

如果errors为null，可能会产生null异常。更好的是你应该使用

myReativeForm.get('userDetails.email').errors?.customError

但是，即使错误不为 null 并且存在 customError，您也会访问它的值，并且它可能会强制为 false。那么即使存在自定义错误，您的跨度也不会显示。

案例2：

<span *ngIf="myReativeForm.get('userDetails.email').hasError('required')">

它总是返回 true 或 false。如果存在 customError，则为 true，如果不存在，则为 false。

Answer 3

hasError()

是一个应避免在模板中使用的函数，因为它们会在应用程序的每个刻度上调用。