Angular中怎么自定义验证器

在Angular中自定义验证器可以通过创建一个函数，并将其应用到表单控件上来实现。下面是一个简单的例子：

首先，创建一个自定义验证器函数：

import { AbstractControl } from '@angular/forms';  export function customValidator(control: AbstractControl): {[key: string]: any} | null {   const valid = control.value === 'example';   return valid ? null : { custom: true }; } 

然后，在组件中将这个验证器函数应用到表单控件上：

import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { customValidator } from './custom-validator';  @Component({   selector: 'app-my-form',   templateUrl: './my-form.component.html' }) export class MyFormComponent {   myForm: FormGroup;    constructor(private fb: FormBuilder) {     this.myForm = this.fb.group({       myControl: ['', [Validators.required, customValidator]]     });   } } 

最后，在模板文件中显示验证错误信息：

<form [formGroup]="myForm">   <input formControlName="myControl">   <div *ngIf="myForm.controls.myControl.hasError('custom')">     This field must be 'example'   </div> </form> 

通过以上步骤，你就可以在Angular中自定义验证器并进行验证了。