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

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

{ validator: this.checkPasswords }

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

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

<form [formGroup]="passwordForm"><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="passwordMismatch" class="error">Passwords do not match</div><button type="submit" [disabled]="passwordForm.invalid || passwordMismatch">Submit</button>
</form>

接下来，在组件的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]属性来禁用按钮，如果表单无效或密码不一致。

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