面试题：Angular结合TypeScript的表单验证优化

Question

在Angular项目里，使用TypeScript实现一个自定义表单验证器，要求验证器能检查输入字符串长度是否在指定范围内，同时在表单提交时，根据验证结果显示友好的错误提示。描述实现思路并给出核心代码。

Answer 1

实现思路

1. 创建自定义验证器函数：使用ValidatorFn类型定义一个函数，该函数接收一个AbstractControl参数，通过control.value获取输入值，检查其长度是否在指定范围内，返回null（验证通过）或包含错误信息的对象（验证失败）。
2. 将验证器应用到表单控件：在表单构建时，将自定义验证器添加到相应的表单控件中。
3. 显示错误提示：在模板中，使用ngIf指令根据表单控件的hasError方法判断是否存在特定错误，并显示相应的友好错误提示。

核心代码

1. 自定义验证器函数

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

export function lengthRangeValidator(min: number, max: number): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const value = control.value;
    if (typeof value ==='string' && (value.length < min || value.length > max)) {
      return { 'lengthRange': { min, max } };
    }
    return null;
  };
}

2. 在表单中使用验证器

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

@Component({
  selector: 'app-custom-validator',
  templateUrl: './custom-validator.component.html'
})
export class CustomValidatorComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      inputField: new FormControl('', [
        lengthRangeValidator(3, 10)
      ])
    });
  }
}

3. 在模板中显示错误提示

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="inputField">
  <div *ngIf="myForm.get('inputField').hasError('lengthRange') && (myForm.get('inputField').touched || myForm.get('inputField').dirty)">
    输入长度应在3到10个字符之间
  </div>
  <button type="submit">提交</button>
</form>