Angular 4 验证器可同时检查 2 个控件

typescript

# Angular 4中使用验证器同时检查两个控件的方法

Angular是一个流行的前端框架，提供了强大的表单处理机制。在表单验证中，有时需要同时检查两个控件的值。本文将介绍如何使用Angular 4中的验证器来实现这一需求，并提供一个简单的案例代码。

## 概述

在Angular中，我们可以使用自定义验证器来对表单进行更灵活的验证。当需要同时检查两个控件的值时，可以创建一个自定义验证器函数，该函数接收两个控件作为参数，然后根据需要执行验证逻辑。

## 实现

首先，我们需要创建一个自定义验证器函数。这个函数将接收两个控件作为参数，然后比较它们的值并返回一个验证结果。下面是一个简单的例子：

typescript
import { ABStractControl, ValidationErrors } from '@angular/forms';
export function compareValues(control1: ABStractControl, control2: ABStractControl): ValidationErrors | null {
  const value1 = control1.value;
  const value2 = control2.value;
  if (value1 !== value2) {
    return { valuesNotMatch: true };
  }
  return null;
}

在这个例子中，我们创建了一个名为compareValues的函数，它接收两个控件作为参数，并比较它们的值。如果值不匹配，函数将返回一个包含错误信息的对象；否则，返回null表示验证通过。

接下来，我们可以将这个验证器应用到表单中的两个控件。在组件的模板中，我们可以使用FormGroup和Validators来应用自定义验证器：

typescript
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { compareValues } from './validators';
@Component({
  selector: 'app-root',
  template: <code>
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <label for="password">Password:</label>
      <input type="password" id="password" formControlName="password">
      <label for="confirmPassword">Confirm Password:</label>
      <input type="password" id="confirmPassword" formControlName="confirmPassword">
      <div *ngIf="myForm.hasError('valuesNotMatch', ['password', 'confirmPassword'])">
        Passwords do not match.
      </div>
      <button type="submit" [disabled]="myForm.invalid">Submit</button>
    </form>
  </code>,
})
export class AppComponent {
  myForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required],
    }, { validators: compareValues });
  }
  onSubmit() {
    // Handle form submission
  }
}

在上面的例子中，我们使用FormGroup和FormBuilder创建了一个包含两个密码输入框的表单。在表单组的配置中，我们通过{ validators: compareValues }将自定义验证器应用到整个表单组上。在模板中，我们使用*ngIf指令来根据验证结果显示错误信息。

##

通过使用Angular 4中的自定义验证器，我们可以轻松实现同时检查两个控件的值的需求。这种灵活的验证机制使得处理复杂表单变得更加简单和可控。在实际应用中，可以根据具体业务需求扩展验证器的逻辑。希望本文对你理解Angular中表单验证有所帮助。