确认密码验证器不工作 - 角

Question

我试图做一个自定义验证。如果密码不匹配，我想添加ng-invalid类（将输入设置为无效）。

这里是HTML的

<div class="form-group"> 
    <label for="password">Password:</label> 
    <label class="validations" @load *ngIf="!regForm.get('password').valid && regForm.get('password').touched">Please Enter a Valid Password!</label> 
    <input type="password" class="form-control" id="password" minlength="6" required placeholder="Enter Your Team Password" formControlName="password"> 
</div> 
<div class="form-group"> 
     <label for="password">Confirm Password:</label> 
     <label class="validations" @load *ngIf="(!(regForm.get('password').value == regForm.get('password_confirmation').value)) && regForm.get('password_confirmation').touched">Passwords do not Match!</label> 
     <input type="password" class="form-control" id="password" 
      [ngClass]="{pwd_mismatch : !(regForm.get('password').value === regForm.get('password_confirmation').value) && regForm.get('password_confirmation').touched}" required placeholder="Re-Enter Your Team Password" formControlName="password_confirmation"> 
</div> 

和component.ts -

passwordConfirm(control: FormControl): {[s: string]: boolean} { 
    if (control.value != this.password) { 
     control.hasError; 
     return null; 
    } 
    return {'mismatch': true}; 
} 

注：this.password店从密码输入FormControl。 pwd_mismatch类是实时添加到输入，但未设置为无效

Answer 1

您的逻辑是倒退的。如果密码匹配，则必须返回null，即如果没有错误。因此，代码应该是

passwordConfirm(control: FormControl): {[s: string]: boolean} { 
    if (control.value === this.password) { 
     return null; 
    } 
    return { mismatch: true }; 
}