我正在尝试检查两个密码是否相等.如果没有,我没有收到任何错误消息,但没有收到“密码必须匹配”的错误消息.
以下是我的DOM:
<div class="form-group" [ngClass]="{'has-error': formName.get('password').touched &&
formName.get('password').hasError('invalidPassword')}">
<label class="control-label">Password</label>
<input type="text" class="form-control" formControlName="password" name="password" required />
</div>
<div class="form-group" [ngClass]="{'has-error': formName.get('confirmpassword').touched
&& formName.get('confirmpassword').hasError('mismatchedPasswords')}">
<label class="control-label">confirm password</label>
<input type="text" class="form-control" formControlName="confirmpassword" name="confirmpassword" required />
<span class="help-block" *ngIf="formName.get('confirmpassword').touched
&& formName.get('confirmpassword').hasError('mismatchedPasswords')">
Password must match
</span>
</div>
我关于如何构建表单的Component类:
this.formName = this.fb.group({
name: ["", [Validators.required]],
password: ["",[Validators.required, ValidationHelper.passwordValidator]],
confirmpassword: ["",Validators.required],
info: this.fb.group({
acc: ["",[Validators.required, ValidationHelper.creditCardValidator]]
})
},{ validator: ValidationHelper.matchPass})
static matchPass = (control: AbstractControl) : {[key: string]: boolean} => {
let password = control.get('password');
let confirmPassword = control.get('confirmpassword');
return password.value === confirmPassword.value ? null : { 'mismatchedPasswords': true };
}
该函数被调用,我也获得了返回值…但是为什么我的确认密码输入控件未显示错误或未激活其span标签.
解决方法:
问题出在模板中的这些行:
formName.get(‘confirmpassword’).hasError(‘mismatchedPasswords’)
您正在将验证器应用于组formName,但是在确认密码formControl上检查错误.
尝试在检查模板中不匹配的密码的两个地方使用它.
formName.hasError(‘mismatchedPasswords’)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。