angular12里面FormGroup做多个项目的相关check

FromFroup在鼠标失去焦点时做相关check，可以在group方法第二个参数的位置加一个对象参数

{ validator: this.checkPasswords }

在Angular 12中，可以使用formGroup来进行两个密码是否一致的检查。以下是一个示例：

首先，在组件的HTML模板中，创建一个formGroup，并在其中定义两个密码输入框：

  Password:
  

  Confirm Password:
  

  
Passwords do not match

  Submit

接下来，在组件的TS文件中，定义passwordForm和passwordMismatch属性，并在ngOnInit方法中创建formGroup并添加密码一致性的验证器：

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

@Component({
  selector: 'app-password-check',
  templateUrl: './password-check.component.html',
  styleUrls: ['./password-check.component.css']
})
export class PasswordCheckComponent implements OnInit {
  passwordForm: FormGroup;
  passwordMismatch: boolean = false;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.passwordForm = this.formBuilder.group({
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    }, { validator: this.checkPasswords });
  }

  checkPasswords(group: FormGroup) {
    const password = group.controls.password.value;
    const confirmPassword = group.controls.confirmPassword.value;

    return password === confirmPassword ? null : { mismatch: true };
  }

  onSubmit() {
    // Handle form submission
  }
}

或者

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

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

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

  passwordMatchValidator(control: AbstractControl): { [key: string]: boolean } | null {
    const password = control.get('password');
    const confirmPassword = control.get('confirmPassword');

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

    return null;
  }
}

在上面的代码中，我们使用formBuilder创建了一个formGroup，并将checkPasswords方法作为验证器添加到formGroup中。checkPasswords方法比较了两个密码输入框的值，如果不一致，则返回一个包含mismatch属性的对象。

在HTML模板中，我们使用*ngIf指令来根据passwordMismatch属性的值显示错误消息。并且我们还在提交按钮上使用了[disabled]属性来禁用按钮，如果表单无效或密码不一致。

这样，当用户输入两个密码后，如果两个密码不一致，错误消息将显示，并且提交按钮将被禁用。只有当两个密码一致且表单有效时，才能提交表单。