javascript 使用反应形式以角度验证密码和确认密码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53719313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
password and confirmpassword validation in angular using reactive forms
提问by swagath
i have attached my code below .im facing problem in adding password mismatch validation.im not getting validation error if i type mismatching password
我在下面附上了我的代码。我在添加密码不匹配验证时遇到问题。如果我输入不匹配的密码，我不会收到验证错误
register.component.html
注册.component.html
<div class="form-group row mt-3">
<label class="col-md-4 col-lg-4 text-center">UserName:<span style="color:red">*</span></label>
<input kendoTextBox required type="text" class=" col-md-6 col-lg-6 form-control " placeholder="Enter Your UserName " formControlName="username"/>
<div *ngIf="(submitted||f2.username.touched) && f2.username.invalid" class="error-msg">
<div *ngIf="f2.username.errors.required">UserName is required</div>
</div> </div>
<div class="form-group row">
<label class="col-md-4 col-lg-4 text-center">Password:<span style="color:red">*</span></label>
<input kendoTextBox type="password" required class=" col-md-6 col-lg-6 form-control " placeholder="Enter Your passowrd " formControlName="password"/>
<div *ngIf="(submitted||f2.password.touched) && f2.password.invalid" class="error-msg">
<div *ngIf="f2.password.errors.required">password is required</div>
<div *ngIf="f2.password.errors.minlength">minimum of 6 characters required</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-4 col-lg-4 text-center">ConfirmPassword:
<span style="color:red">*</span></label>
<input kendoTextBox required type="password" class=" col-md-6 col-lg-6 form-control " placeholder="Enter Your new password " formControlName="confirmpassword"/>
<div *ngIf="(submitted||f2.confirmpassword.touched) && f2.confirmpassword.invalid" class="error-msg">
<div *ngIf="f2.confirmpassword.errors.required"> confirm password is required</div> <div *ngIf="f2.confirmpassword.errors.minlength">minimum of 6 characters required
</div>
<div class="error-msg" *ngIf="f2.errors?.mismatch && (f2.controls['confirmpassword'].required || f2.controls['confirmpassword'].touched)">
Passwords don't match.
</div>
</div>
</div>
enter code here
registercomponent.ts file
registercomponent.ts 文件
here i have used formBuilder.other things are working fine ,only validation for mismatching not working
在这里我使用了 formBuilder.other 事情工作正常，只有不匹配的验证不起作用
this.registerForm3 = this.formBuilder.group({
username:['', Validators.required],
password: ['', [Validators.required, Validators.minLength(6)]],
confirmpassword:['', [Validators.required, Validators.minLength(6)]],
},
{validator: this.passwordMatchValidator},
);
passwordMatchValidator(frm: FormGroup) {
eturn frm.controls['password'].value ===
frm.controls['confirmpassword'].value ? null : {'mismatch': true};
}
get f2() {
return this.registerForm3.controls;
}
采纳答案by Paresh Gami
You can check form value of both like below.
您可以像下面这样检查两者的表单值。
<div class="error-msg" *ngIf="registerForm3.value.password !== registerForm3.value.confirmpassword">
Passwords don't match.
</div>
回答by DeborahK
I didn't think that you could use a component member function (method) for your custom validator. I assumed it needed to be a function external from your class.
我不认为您可以为自定义验证器使用组件成员函数（方法）。我认为它需要是您班级的外部函数。
Mine looks like this:
我的看起来像这样：
function emailMatcher(c: AbstractControl): { [key: string]: boolean } | null {
const emailControl = c.get('email');
const confirmControl = c.get('confirmEmail');
if (emailControl.pristine || confirmControl.pristine) {
return null;
}
if (emailControl.value === confirmControl.value) {
return null;
}
return { 'match': true };
}
And I attach the validator to a child formGroup like so:
我将验证器附加到子表单组，如下所示：
this.customerForm = this.fb.group({
firstName: ['', [Validators.required, Validators.minLength(3)]],
lastName: ['', [Validators.required, Validators.maxLength(50)]],
emailGroup: this.fb.group({
email: ['', [Validators.required, Validators.email]],
confirmEmail: ['', Validators.required],
}, { validator: emailMatcher }),
phone: ''
});
You could put your validator in a separate file, or in the same file either above or below your component class. Something like this:
您可以将验证器放在单独的文件中，或者放在组件类上方或下方的同一文件中。像这样的东西：
function passwordMatchValidator(frm: FormGroup) {
return frm.controls['password'].value ===
frm.controls['confirmpassword'].value ? null : {'mismatch': true};
}
Then you would define the validator without the thiskeyword:
然后你将定义没有this关键字的验证器：
{validator: passwordMatchValidator},
You can find the complete example here: https://github.com/DeborahK/Angular-ReactiveForms/tree/master/Demo-Final
你可以在这里找到完整的例子：https: //github.com/DeborahK/Angular-ReactiveForms/tree/master/Demo-Final
回答by R. Viral
You can try this its working for me...
你可以试试这个对我有用...
In your form
在你的表格中
this.passwordForm = this.fb.group({
newPassword: ['', [Validators.required, Validators.minLength(6)]],
confirmNewPassword: ['', [Validators.required, Validators.minLength(6), (control => ValidationService.confirmPassword(control, this.passwordForm, 'newPassword'))]]
});
ValidationService file
验证服务文件
static confirmPassword(control: FormControl, group: FormGroup, matchPassword: string) {
if (!control.value || group.controls[matchPassword].value !== null || group.controls[matchPassword].value === control.value) {
return null;
}
return { 'mismatch': true }
}
回答by swagath
finally i found my solution
最后我找到了我的解决方案
export class ConfirmPasswordValidator {
static MatchPassword(control: AbstractControl) {
let password = control.get('password').value;
let confirmpassword = control.get('confirmpassword').value;
if(password != confirmpassword) {
control.get('confirmpassword').setErrors( {ConfirmPassword: true} );
} else {
return null
}
}
}
回答by Krishnadas PC
For angular 8you can use a custom validation like this.
对于angular 8，您可以使用这样的自定义验证。
Import the required libraries
导入所需的库
import { FormGroup, FormControl, Validators, ValidatorFn, ValidationErrors } from '@angular/forms';
const passwordErrorValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
const password = control.get('a');
const repeatPassword = control.get('b');
return password.value != repeatPassword.value ? { 'passwordError': true } : null;
};
Init form like this
像这样初始化表单
heroForm = new FormGroup({
'a': new FormControl(),
'b': new FormControl()
}, { validators: passwordErrorValidator });
And in component
并在组件中
<form [formGroup]="heroForm" (ngSubmit) ="createUser(heroForm.value)">
<input id="a" name="a" class="form-control"
required minlength="4"
formControlName="a">
<input id="b" name="b" class="form-control"
required minlength="4"
formControlName="b" >
<div *ngIf="heroForm.errors?.passwordError && (heroForm.touched || heroForm.dirty)" class="cross-validation-error-message alert alert-danger">
password mismatch
</div>
<input type="submit" class="btn btn-primary" value="Submit" />
</form>
