Angular 2中的密码确认答案

【问题标题】：password confirmation in angular 2Angular 2中的密码确认
【发布时间】：2017-02-15 20:03:07
【问题描述】：

我正在尝试检查两个密码是否相等。我没有收到任何错误消息，但我没有收到错误消息“密码必须匹配”。

下面是我的 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>

关于我如何构建表单的组件类：

   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 };        
}

函数被调用，我也得到返回值...但是为什么我的确认密码输入控件没有显示错误或激活它的跨度标签。

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

问题在于模板中的这些行：

formName.get('confirmpassword').hasError('mismatchedPasswords')

您将验证器应用于组 formName，但检查 confirmpassword formControl 上的错误。

尝试在模板中检查 mismatchedPasswords 的两个地方使用它。

formName.hasError('mismatchedPasswords')

【讨论】：