面试题：Angular模板驱动表单中如何自定义验证器

Question

在Angular的模板驱动表单开发中，要求你实现一个自定义验证器，用于验证输入的字符串长度必须在5到10之间。请描述实现步骤并给出相关代码示例。

Answer 1

实现步骤

1. 创建一个自定义验证器函数，该函数接收一个AbstractControl参数。
2. 在函数内部，获取输入字符串的长度，判断其是否在5到10之间。
3. 如果长度不符合要求，返回一个包含错误信息的对象；如果符合要求，返回null。
4. 在模板驱动表单中使用该自定义验证器。

代码示例

1. 自定义验证器函数

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

export function stringLengthValidator(control: AbstractControl): ValidationErrors | null {
  const value = control.value;
  if (typeof value ==='string' && (value.length < 5 || value.length > 10)) {
    return { stringLength: true };
  }
  return null;
}

2. 在模板驱动表单中使用

<form #myForm="ngForm">
  <input type="text" name="inputText" [(ngModel)]="inputValue" [ngModelOptions]="{standalone: true}" [validators]="[stringLengthValidator]" />
  <div *ngIf="myForm.controls['inputText']?.hasError('stringLength')">
    字符串长度必须在5到10之间
  </div>
  <button type="submit">提交</button>
</form>

在组件类中引入验证器：

import { Component } from '@angular/core';
import { stringLengthValidator } from './string-length-validator';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html'
})
export class MyFormComponent {
  inputValue = '';
}