密码确认密码验证检查

Question

我正在使用Angular 2的最新版本。我正在尝试检查密码字段和确认密码中的密码是否相同。或者如果两个字段匹配。这是我到目前为止所做的，但它似乎并没有工作。

任何帮助，将不胜感激。

Signup.component.ts

import { Component, OnInit } from '@angular/core'; 
import {Validators, FormGroup, FormBuilder } from "@angular/forms"; 

@Component({ 
    selector: 'app-signup', 
    templateUrl: './signup.component.html', 
    styleUrls: ['./signup.component.css'] 
}) 
export class SignupComponent implements OnInit { 
    myForm: FormGroup; 
    constructor(private fb: FormBuilder) { 
    } 
    onSignup() { 
    console.log("Logged in"); 
    } 

    ngOnInit() { 
    this.myForm = this.fb.group({ 
     email: ['', Validators.compose([ 
     Validators.required, 
     ])], 
     password: ['', Validators.compose([ 
      Validators.required, 
     ])], 
     confirmPassword: ['', Validators.compose([ 
     Validators.required, 

     ])], 
    }); 
    } 
} 

Signup.component.html

<div class="container"> 
    <form [formGroup]="myForm" novalidate (ngSubmit)="onSignup()"> 
    <div class="form-group"> 
     <label for="email">Email</label> 
     <input type="email" class="form-control" id="email" name="email"> 
     <small [hidden]="myForm.controls.email.valid || (myForm.controls.email.pristine && !myForm.submitted)" class="text-danger"> 
     Email is required. 
     </small> 
    </div> 
    <div class="form-group"> 
     <label for="password">Password</label> 
     <input type="password" class="form-control" id="password" name="password" validateEqual="confirmPassword" reverse="true"> 
     <small [hidden]="myForm.controls.password.valid || (myForm.controls.password.pristine && !myForm.submitted)" class="text-danger"> 
     Password is required 
     </small> 
    </div> 
    <div class="form-group"> 
     <label for="confirmPassword">Retype password</label> 
     <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" validateEqual="password" reverse="false"> 
     <small [hidden]="myForm.controls.confirmPassword.valid || (myForm.controls.confirmPassword.pristine && !myForm.submitted)" class="text-danger"> 
     Password mismatch 
     </small> 
    </div> 
    <button type="submit" [disabled]="!myForm.valid" class="btn btn-default">Submit</button> 
    </form> 
</div> 

Validator.ts

import { Directive, forwardRef, Attribute } from '@angular/core'; 
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms'; 
@Directive({ 
    selector: 'validator', 
    providers: [ 
     { provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true } 
    ] 
}) 
export class EqualValidator implements Validator { 
    constructor(@Attribute('validateEqual') public validateEqual: string, 
       @Attribute('reverse') public reverse: string) { 
    } 
    private get isReverse() { 
     if (!this.reverse) return false; 
     return this.reverse === 'true' ? true: false; 
    } 
    validate(c: AbstractControl): { [key: string]: any } { 
     // self value 
     let v = c.value; 
     // control vlaue 
     let e = c.root.get(this.validateEqual); 
     // value not equal 
     if (e && v !== e.value && !this.isReverse) { 
      return { 
       validateEqual: false 
      } 
     } 

     // value equal and reverse 
     if (e && v === e.value && this.isReverse) { 
      delete e.errors['validateEqual']; 
      if (!Object.keys(e.errors).length) e.setErrors(null); 
     } 
     // value not equal and reverse 
     if (e && v !== e.value && this.isReverse) { 
      e.setErrors({ 
       validateEqual: false 
      }) 
     } 
     return null; 
    } 
} 

任何帮助将不胜感激。谢谢！

Answer 1

这是一个工作的plunk，它挂在值的变化中直接监视值并设置错误。

我确定有更多聪明的解决方案可以被发现或想到。

http://plnkr.co/PXcae8kq9quYFQC2x7K2

subscribeToFormChangesAndSetValidity() { 
     const myFormValueChanges$ = this.myForm.controls["passwords"].valueChanges; 

     myFormValueChanges$.subscribe(x => { 
      if(x.password === x.confirmPassword) { 
       this.myForm.controls["passwords"].setErrors(null); 
      } else { 
       this.myForm.controls["passwords"].setErrors({ "notValid" : true}); 
      } 
     }); 
    } 

    ngOnInit() { 
    this.myForm = this.fb.group({ 
     email: ['', Validators.required], 
     passwords: this.fb.group({ 
     password: ['', Validators.required], 
     confirmPassword: ['', Validators.required] 
     }) 
     }); 

     this.subscribeToFormChangesAndSetValidity(); 
    }