如何在 Angular 10 中检查表单或控件是否无效？

在Angular中使用表单和控件是常见的需求。在开发一个表单时，我们通常需要对表单和表单控件进行验证和状态管理，以确保输入符合预期和规范。在本文中，我们将介绍如何在Angular 10中检查表单或控件是否无效，以及如何设置表单验证。

什么是表单状态？

在Angular中，表单有三种状态：有效，无效和待定。

• 有效状态：所有表单控件都通过了自定义验证器和Angular的默认验证器。这意味着表单控件中的所有值都符合预期和规范。
• 无效状态：至少其中一个表单控件未通过自定义验证器和Angular的默认验证器。这意味着表单控件中的某些值不符合预期和规范。
• 待定状态：表单控件还未被访问过。这个状态不会影响表单的有效性，但可以用于动态显示错误消息。

如何检查表单的状态？

要检查表单的状态，可以使用status属性。

form.status // "VALID" | "INVALID" | "PENDING" | "DISABLED"

如何检查控件的状态？

检查单个控件的状态，可以使用form.get()方法。

form.get('controlName').status // "VALID" | "INVALID" | "PENDING" | "DISABLED"

如何在模板中显示表单状态？

可以通过表单的状态来动态显示错误消息和禁用提交按钮等。

<form (submit)="onSubmit()" #myForm="ngForm">
  <input type="text" name="myInput" [(ngModel)]="myInput" required> 
  <span *ngIf="myForm.controls['myInput'].invalid">Please enter a valid input</span>
  <button [disabled]="myForm.invalid">Submit</button>
</form>

在上面的代码中，我们使用myForm.controls['myInput'].invalid来检查控件的状态，如果控件无效，我们将动态显示错误消息。我们还通过myForm.invalid来检查表单的状态，如果表单无效，我们将禁用提交按钮。

如何设置表单验证？

Angular提供了不同的验证器来验证表单数据。你可以使用内置验证器或自定义验证器来验证表单。以下是一个简单的例子，说明如何在控件上设置required验证器。

<input type="text" name="myInput" [(ngModel)]="myInput" required> 

这个控件必须填写一个值，否则它将变为无效状态。同样，您可以设置其他验证器来验证输入值是否符合要求。

你还可以使用自定义验证器来验证表单数据。以下是一个自定义验证器示例。

import { Directive, Input } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';

@Directive({
  selector: '[equalTo][ngModel]',
  providers: [{
    provide: NG_VALIDATORS,
    useExisting: EqualToValidator,
    multi: true
  }]
})
export class EqualToValidator implements Validator {
  @Input() equalTo: any;

  validate(control: AbstractControl): { [key: string]: any } | null {
    const value = control.value;
    if (value !== this.equalTo) {
      return { 'equalTo': true };
    }
    return null;
  }
}

在上面的代码中，我们创建了一个名为equalTo的指令，该指令用于验证两个字段是否相等。我们使用validate方法来实现自定义验证。如果两个输入字段具有不同的值，则表单将被标记为无效状态，并显示一个错误消息。

总结

在Angular 10中，通过状态来验证表单和控件是非常重要的。您可以使用内置验证器或自定义验证器来验证表单数据。您还可以使用表单验证状态来动态显示错误消息或禁用提交按钮。在完成表单开发时，请务必熟悉表单状态和如何在表单控件上设置验证器。