1. 在组件中定义一个自定义验证器：

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

@Directive({
  selector: '[customValidator]',
  providers: [{
      provide: NG_VALIDATORS,
      useExisting: CustomValidatorDirective,
      multi: true
  }]
})
export class CustomValidatorDirective implements Validator {

  validate(control: AbstractControl): { [key: string]: any } | null {
    // 自定义验证逻辑
    if (control.value && control.value.length < 5) {
      return { 'customValidator': 'Validation failed' };
    }
    return null;
  }
}

2. 在组件模板中使用自定义验证器：

  
  

    
Custom validation error: {{ myFieldControl.errors.customValidator }}
  

这里我们通过在 input 标签上添加 customValidator 指令来启用自定义验证器，然后使用 ngIf 指令来判断是否有错误并显示错误消息。注意在上面的代码中，我们使用了模板引用变量 #myFieldControl 来访问当前控件的状态。

3. 在组件中通过 @ViewChild 装饰器来获取表单控件：

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent {
  @ViewChild('myForm')
  myForm: NgForm;

  onSubmit() {
    console.log(this.myForm.value);
  }
}

在上例中，我们使用 @ViewChild 装