验证器和错误在Angular 9中不起作用

在Angular 9中，验证器和错误处理通常是通过表单控件来实现的。如果你发现验证器和错误没有按预期工作，可能是以下几个原因：

基础概念

表单控件：Angular表单中的基本元素，可以是输入框、选择框等。
验证器：用于检查表单控件的值是否有效的函数或对象。
错误：当表单控件的值无效时显示的信息。

可能的原因及解决方法

1. 验证器未正确设置

确保你已经在表单控件上正确设置了验证器。

import { FormControl, Validators } from '@angular/forms';

const myControl = new FormControl('', [Validators.required]);

2. 表单组或表单数组未正确使用

如果你在使用表单组（FormGroup）或表单数组（FormArray），确保它们已经正确配置。

import { FormGroup, FormControl } from '@angular/forms';

const myForm = new FormGroup({
  name: new FormControl('', Validators.required),
  email: new FormControl('', [Validators.required, Validators.email])
});

3. 模板绑定问题

确保在模板中正确绑定了表单控件和错误信息。

<form [formGroup]="myForm">
  <input formControlName="name">
  <div *ngIf="myForm.get('name').invalid && (myForm.get('name').dirty || myForm.get('name').touched)">
    <div *ngIf="myForm.get('name').errors?.required">Name is required.</div>
  </div>
</form>

4. 异步验证器问题

如果你使用了异步验证器，确保它们已经正确处理。

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';

function asyncValidator(): ValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    return of(control.value === 'async').pipe(
      map(isValid => isValid ? null : { asyncInvalid: true })
    );
  };
}

const myControl = new FormControl('', [], [asyncValidator()]);

5. 检查Angular版本兼容性

确保你使用的Angular版本和相关库的版本是兼容的。

应用场景

验证器和错误处理在需要用户输入的表单中非常常见，例如注册表单、登录表单、搜索表单等。

示例代码

以下是一个完整的示例，展示了如何在Angular 9中使用验证器和错误处理。

// app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myForm = new FormGroup({
    name: new FormControl('', Validators.required),
    email: new FormControl('', [Validators.required, Validators.email])
  });
}

<!-- app.component.html -->
<form [formGroup]="myForm">
  <input formControlName="name">
  <div *ngIf="myForm.get('name').invalid && (myForm.get('name').dirty || myForm.get('name').touched)">
    <div *ngIf="myForm.get('name').errors?.required">Name is required.</div>
  </div>

  <input formControlName="email">
  <div *ngIf="myForm.get('email').invalid && (myForm.get('email').dirty || myForm.get('email').touched)">
    <div *ngIf="myForm.get('email').errors?.required">Email is required.</div>
    <div *ngIf="myForm.get('email').errors?.email">Invalid email format.</div>
  </div>
</form>