Angular 11 如何使用 Reactive 表单验证 confirmPassword 是否与密码相同
Angular 11 How to validate confirmPassword is same as password using Reactive forms
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-user-register',
templateUrl: './user-register.component.html',
styleUrls: ['./user-register.component.css']
})
export class UserRegisterComponent implements OnInit {
registerationForm: FormGroup = new FormGroup({});
constructor() { }
ngOnInit() {
this.registerationForm = new FormGroup({
userName : new FormControl(null, Validators.required),
email : new FormControl(null, [Validators.required, Validators.email]),
password : new FormControl(null, [Validators.required, Validators.minLength(8)]),
confirmPassword : new FormControl(null, [Validators.required]),
mobile : new FormControl(null, [Validators.required, Validators.minLength(10)])
}, this.passwordMatchingValidatior);
}
passwordMatchingValidatior(fg: FormGroup): Validators{
return this.registerationForm.get('password').value === this.registerationForm.get('confirmPassword').value ? null : {notmatched: true};
}
onSubmit(){
console.log(this.registerationForm);
}
}
错误信息
错误:src/app/user/user-register/user-register.component.ts:24:5 - 错误 TS2322:类型 '{ notmatched: boolean; } | null' 不可分配给类型 'Validators'。
类型 'null' 不可分配给类型 'Validators'.
24 return this.registerationForm.get('password').value === this.registerationForm.get('confirmPassword').value ? null : {notmatched: true};
错误:src/app/user/user-register/user-register.component.ts:24:61 - 错误 TS2531:对象可能是 'null'.
24 return this.registerationForm.get('password').value === this.registerationForm.get('confirmPassword').value ? null : {notmatched: true};
试试这些改变。
@Component({
selector: 'app-user-register',
templateUrl: './user-register.component.html',
styleUrls: ['./user-register.component.css']
})
export class UserRegisterComponent implements OnInit {
registerationForm: FormGroup = new FormGroup({});
constructor() { }
ngOnInit() {
this.registerationForm = new FormGroup({
userName : new FormControl(null, Validators.required),
email : new FormControl(null, [Validators.required, Validators.email]),
password : new FormControl(null, [Validators.required, Validators.minLength(8)]),
confirmPassword : new FormControl(null, [Validators.required]),
mobile : new FormControl(null, [Validators.required, Validators.minLength(10)])
}, this.passwordMatchingValidatior);
}
passwordMatchingValidatior(form: FormGroup): null => {
const password = form.controls['password'].value;
const confirmation = form.controls['confirmPassword'].value;
if (!password || !confirmation) { // if the password or confirmation has not been inserted ignore
return null;
}
if (confirmation.length > 0 && confirmation !== password) {
confirmation.setErrors({ notMatch: true }); // set the error in the confirmation input/control
}
return null; // always return null here since as you'd want the error displayed on the confirmation input
}
onSubmit(){
console.log(this.registerationForm);
}
}
创建你的验证器
export const passwordMatchingValidatior: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
const password = control.get('password');
const confirmPassword = control.get('confirmPassword');
return password?.value === confirmPassword?.value ? null : { notmatched: true };
};
并更新表单组验证器
this.registerationForm = new FormGroup({
userName: new FormControl(null, Validators.required),
email: new FormControl(null, [Validators.required, Validators.email]),
password: new FormControl(null, [Validators.required, Validators.minLength(8)]),
confirmPassword: new FormControl(null, [Validators.required]),
mobile: new FormControl(null, [Validators.required, Validators.minLength(10)])
}, { validators: passwordMatchingValidatior });
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-user-register',
templateUrl: './user-register.component.html',
styleUrls: ['./user-register.component.css']
})
export class UserRegisterComponent implements OnInit {
registerationForm: FormGroup = new FormGroup({});
constructor() { }
ngOnInit() {
this.registerationForm = new FormGroup({
userName : new FormControl(null, Validators.required),
email : new FormControl(null, [Validators.required, Validators.email]),
password : new FormControl(null, [Validators.required, Validators.minLength(8)]),
confirmPassword : new FormControl(null, [Validators.required]),
mobile : new FormControl(null, [Validators.required, Validators.minLength(10)])
}, this.passwordMatchingValidatior);
}
passwordMatchingValidatior(fg: FormGroup): Validators{
return this.registerationForm.get('password').value === this.registerationForm.get('confirmPassword').value ? null : {notmatched: true};
}
onSubmit(){
console.log(this.registerationForm);
}
}
错误信息 错误:src/app/user/user-register/user-register.component.ts:24:5 - 错误 TS2322:类型 '{ notmatched: boolean; } | null' 不可分配给类型 'Validators'。 类型 'null' 不可分配给类型 'Validators'.
24 return this.registerationForm.get('password').value === this.registerationForm.get('confirmPassword').value ? null : {notmatched: true};
错误:src/app/user/user-register/user-register.component.ts:24:61 - 错误 TS2531:对象可能是 'null'.
24 return this.registerationForm.get('password').value === this.registerationForm.get('confirmPassword').value ? null : {notmatched: true};
试试这些改变。
@Component({
selector: 'app-user-register',
templateUrl: './user-register.component.html',
styleUrls: ['./user-register.component.css']
})
export class UserRegisterComponent implements OnInit {
registerationForm: FormGroup = new FormGroup({});
constructor() { }
ngOnInit() {
this.registerationForm = new FormGroup({
userName : new FormControl(null, Validators.required),
email : new FormControl(null, [Validators.required, Validators.email]),
password : new FormControl(null, [Validators.required, Validators.minLength(8)]),
confirmPassword : new FormControl(null, [Validators.required]),
mobile : new FormControl(null, [Validators.required, Validators.minLength(10)])
}, this.passwordMatchingValidatior);
}
passwordMatchingValidatior(form: FormGroup): null => {
const password = form.controls['password'].value;
const confirmation = form.controls['confirmPassword'].value;
if (!password || !confirmation) { // if the password or confirmation has not been inserted ignore
return null;
}
if (confirmation.length > 0 && confirmation !== password) {
confirmation.setErrors({ notMatch: true }); // set the error in the confirmation input/control
}
return null; // always return null here since as you'd want the error displayed on the confirmation input
}
onSubmit(){
console.log(this.registerationForm);
}
}
创建你的验证器
export const passwordMatchingValidatior: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
const password = control.get('password');
const confirmPassword = control.get('confirmPassword');
return password?.value === confirmPassword?.value ? null : { notmatched: true };
};
并更新表单组验证器
this.registerationForm = new FormGroup({
userName: new FormControl(null, Validators.required),
email: new FormControl(null, [Validators.required, Validators.email]),
password: new FormControl(null, [Validators.required, Validators.minLength(8)]),
confirmPassword: new FormControl(null, [Validators.required]),
mobile: new FormControl(null, [Validators.required, Validators.minLength(10)])
}, { validators: passwordMatchingValidatior });