【发布时间】：2021-03-19 10:28:43
【问题描述】：
我正在尝试编写一个表单，该表单涉及在确认密码字段中确认新密码值的逻辑。我几乎肯定这与我的逻辑在自定义验证器本身中的呈现方式有关：password.validators.ts。在不放弃解决方案的情况下，是否缺少我在验证功能中的逻辑？我附上了我的模板、客户验证器文件和组件。当我的自定义验证为真时，我希望确认密码字段在我的模板中抛出一个错误，这种情况是新密码字段与确认密码字段不匹配。当我在字段中输入值时，什么都没有显示。
<form [formGroup]="form">
<div class="form-group">
<label for="oldPassword">Old Password</label>
<input
formControlName="oldPassword"
type="password"
class="form-control"
id="oldPassword"
placeholder="Enter old password">
<div
*ngIf="oldPassword.touched && oldPassword.invalid"
class="alert alert-danger">
<div *ngIf="oldPassword.errors.required">Old password is required</div>
<div *ngIf="oldPassword.errors.cannotContainOldPassword">Old password is not valid</div>
</div>
</div>
<div class="form-group">
<label for="newPassword">New Password</label>
<input
formControlName="newPassword"
type="text"
class="form-control"
id="newPassword"
placeholder="Enter new password">
<div
*ngIf="newPassword.touched && newPassword.invalid"
class="alert alert-danger">
<div *ngIf="newPassword.errors.required">New password is required</div>
</div>
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password</label>
<input
formControlName="confirmPassword"
type="text"
class="form-control"
id="confirmPassword"
placeholder="Confirm new Password">
<div
*ngIf="confirmPassword.touched && confirmPassword.invalid"
class="alert alert-danger">
<div *ngIf="confirmPassword.errors.required">Confirm password is required</div>
<div *ngIf="confirmPassword.errors.confirmNewPassword">Passwords must match</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Change Password</button>
</form>
import { AbstractControl, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
export class PasswordValidators{
//Make sure old password is correct
static cannotContainOldPassword(control: AbstractControl) : Promise<ValidationErrors> | null {
return new Promise((resolve, reject) => {
setTimeout(()=>{
if(control.value != "1234"){
resolve({cannotContainOldPassword: true});
}else{
resolve(null);
}
});
});
}
//Make sure passwords match
static confirmNewPassword(control: AbstractControl): ValidationErrors | null{
let newPass = control.get('newPassword');
let confirmPass = control.get('confirmPassword');
if(newPass === confirmPass){
return null;
//return { confirmNewPassword: true };
}else{
return { confirmNewPassword: true };
}
}
}
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { PasswordValidators } from './password.validators';
@Component({
selector: 'password-form-change',
templateUrl: './password-form-change.component.html',
styleUrls: ['./password-form-change.component.css']
})
export class PasswordFormChangeComponent {
form = new FormGroup({
oldPassword: new FormControl('', Validators.required, PasswordValidators.cannotContainOldPassword),
newPassword: new FormControl('', Validators.required),
confirmPassword: new FormControl('', [
Validators.required,
PasswordValidators.confirmNewPassword
])
})
get oldPassword(){
return this.form.get('oldPassword');
}
get newPassword(){
return this.form.get('newPassword');
}
get confirmPassword(){
return this.form.get('confirmPassword');
}
}
【问题讨论】：
-
你没有说是什么问题
-
我刚刚重新编辑了提示
-
您是否在控制台中看到错误消息？在任何情况下，在您在模板中引用错误对象的任何地方都包含
?。如confirmPassword.errors?.confirmNewPassword -
我的控制台中没有错误。加上 ?运算符，它仍然不显示错误。但是，如果我在字段上进行选项卡，*ngIf="confirmPassword.errors.required" 会呈现适当的错误
-
angular.io/guide/form-validation#defining-custom-validators 说你的验证器函数应该返回
ValidatorFn。不知道这是否重要，但请坚持推荐的模式。
标签： javascript angular typescript forms