面试题：Angular中如何创建一个简单的自定义表单验证器

Question

请描述在Angular中创建一个自定义表单验证器（比如验证输入是否为数字）的步骤，并给出关键代码示例。

Answer 1

1. 创建验证器函数：
   • 验证器函数需要返回一个ValidatorFn类型的函数。这个函数接受一个AbstractControl参数，并返回一个包含验证错误信息的对象或者null（表示验证通过）。
   • 以下是验证输入是否为数字的验证器函数示例：

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

export function numberValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const value = control.value;
    if (value && isNaN(Number(value))) {
      return { notANumber: true };
    }
    return null;
  };
}

2. 在表单控件或表单组中使用验证器：
   • 在单个表单控件中使用：
     • 假设在组件的ngOnInit方法中创建表单控件：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { numberValidator } from './number - validator';

@Component({
  selector: 'app - my - component',
  templateUrl: './my - component.html'
})
export class MyComponent {
  myControl = new FormControl('', numberValidator());
}

• 在表单组中使用：

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { numberValidator } from './number - validator';

@Component({
  selector: 'app - my - component',
  templateUrl: './my - component.html'
})
export class MyComponent {
  myForm = new FormGroup({
    numberInput: new FormControl('', numberValidator())
  });
}

3. 在模板中显示验证错误信息：
   • 假设模板中有一个输入框绑定到myControl：

<input type="text" formControlName="myControl">
<div *ngIf="myControl.hasError('notANumber') && (myControl.touched || myControl.dirty)">
  输入的值必须是数字
</div>

• 如果是表单组中的控件：

<form [formGroup]="myForm">
  <input type="text" formControlName="numberInput">
  <div *ngIf="myForm.get('numberInput').hasError('notANumber') && (myForm.get('numberInput').touched || myForm.get('numberInput').dirty)">
    输入的值必须是数字
  </div>
</form>

总结来说，首先创建验证器函数，然后将其应用到表单控件或表单组中，最后在模板中根据验证结果显示相应的错误信息。