角度2確認密碼

Question

我想檢查兩個密碼是否相等。 我沒有收到任何錯誤消息，但沒有，但我沒有收到錯誤消息“密碼必須匹配” 。

以下是我的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標記。

Answer 1

問題在於模板中的這些行：

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

您正在將驗證器應用於組formName ，但檢查確認confirmpassword formControl上的錯誤。

嘗試在您檢查模板中mismatchedPasswords的兩個地方使用此功能。

formName.hasError('mismatchedPasswords')