要解决Angular中表单验证中匹配的密码不起作用的问题,可以按照以下步骤进行:
formControlName
属性。
FormGroup
实例,并为密码和确认密码字段添加验证规则。import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-password-form',
templateUrl: './password-form.component.html',
styleUrls: ['./password-form.component.css']
})
export class PasswordFormComponent implements OnInit {
passwordForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.passwordForm = this.formBuilder.group({
password: ['', Validators.required],
confirmPassword: ['', Validators.required]
}, {
validator: this.passwordMatchValidator
});
}
passwordMatchValidator(formGroup: FormGroup) {
const password = formGroup.get('password').value;
const confirmPassword = formGroup.get('confirmPassword').value;
if (password !== confirmPassword) {
formGroup.get('confirmPassword').setErrors({ passwordMismatch: true });
} else {
formGroup.get('confirmPassword').setErrors(null);
}
}
}
通过以上步骤,即可在Angular中实现表单验证中匹配的密码不起作用的解决方法。