面试题：Angular自定义验证器在跨表单控件验证中的应用

Question

假设我们有两个表单控件，一个是密码输入框，另一个是确认密码输入框，如何编写一个Angular自定义验证器来确保这两个输入框的值一致？请详细说明实现思路和核心代码。

Answer 1

实现思路

1. 创建一个自定义验证器函数，该函数接收一个 AbstractControl 参数，这个参数实际上是包含密码和确认密码输入框的表单组。
2. 在验证器函数中，从 AbstractControl 中获取密码和确认密码输入框的值。
3. 比较这两个值是否相等，如果不相等则返回一个包含错误信息的对象，否则返回 null，表示验证通过。

核心代码

1. 创建自定义验证器函数

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

export function passwordMatchValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const password = control.get('password');
    const confirmPassword = control.get('confirmPassword');

    if (password && confirmPassword && password.value!== confirmPassword.value) {
      return { passwordMismatch: true };
    }
    return null;
  };
}

2. 在表单中使用自定义验证器

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

@Component({
  selector: 'app-password-match',
  templateUrl: './password-match.component.html',
  styleUrls: ['./password-match.component.css']
})
export class PasswordMatchComponent {
  passwordForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.passwordForm = this.fb.group({
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    }, { validators: passwordMatchValidator() });
  }
}

3. 在模板中显示错误信息

<form [formGroup]="passwordForm">
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" formControlName="password">
  </div>
  <div>
    <label for="confirmPassword">Confirm Password:</label>
    <input type="password" id="confirmPassword" formControlName="confirmPassword">
    <div *ngIf="passwordForm.hasError('passwordMismatch') && (passwordForm.get('confirmPassword').touched || passwordForm.get('confirmPassword').dirty)">
      Passwords do not match.
    </div>
  </div>
</form>