角活性形式的密码验证匹配

Question

我试图在确认密码验证，如果这两个密码相匹配 但我不能得到密码的值

这console.log(this.form)打印

，但我不能访问到password.value如果我做

console.log(this.form.controls) 

个

或console.log(this.form['controls'])

newpassowrd.component.ts

... 
export class PasswordNewComponent implements OnInit{ 

    password: string; 
    id: string; 
    form: FormGroup; 
    submitted: boolean; 



    constructor( private http:Http, 
           private route: ActivatedRoute) { } 


    ngOnInit() { 

     this.id = this.route.snapshot.queryParams['id']; 
     this.form = new FormGroup({ 
        password : new FormControl(null, [Validators.required, Validators.minLength(8)]), 
        confirmpass : new FormControl(null, [Validators.required, Validators.minLength(8), this.forbiddenNames.bind(this)]) 
     }) 
    } 

    forbiddenNames(control: FormControl):{[s: string]: boolean}{ 

     console.log(this.form.controls); // need to the the password value to compare with the confirmed password 

     // if (this.form.controls.password.value.indexOf(control.value) !== -1){ 
      // return {'nameIsForbidden': true}; 
     // } 

     return {'passwordNotMatch': false}; 
    } 


    .... 

newpassword.component.html 我与我创建

<div> 
    <div class="panel"> 
     <h1 class="panel__title">Reset Password</h1> 
      <h5>Please enter your email and the new password</h5> 
      <form [formGroup]="form" (ngSubmit)="onResetPassword( form.valid)"> 


        <div class="input-field col s12"> 
         <label for="password">New Password</label> 
         <input type="password" 
               id="password"            
               formControlName="password"> 
        </div> 

        <span class="error-msg" 
         *ngIf ="form.get('password').invalid && form.get('password').touched || form.get('password').invalid && submitted"> 
          Please confirm your password 
        </span> 

        <div class="input-field col s12"> 
         <label for="confirmpass">Confirm Password</label> 
         <input type="password" 
               id="confirmpass"             
               formControlName="confirmpass"> 
        </div> 
        <span class="error-msg" 
         *ngIf ="form.get('confirmpass').invalid && form.get('confirmpass').touched || form.get('confirmpass').invalid && submitted" 
         >Please confirm your password</span>      

        <span class="error-msg" 
        *ngIf ="form.get('confirmpass').errors['nameIsForbidden']" 

        > custom message test validation</span> 


      <button class="btn panel__btn" type="submit" name="action">Reset Password</button> 
     </form> 
    </div> 
</div> 

this is a lorem ipsum content 

定制varible测试

Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机采用了一种类型的厨房，并将其制作成样本书。它不仅存活了五个世纪，而且还实现了电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset工作表的发布以及最近的包括Aldus PageMaker在内的桌面出版软件的普及，包括版本的Lorem Ipsum

Answer 1

我想你可以调用form.get（'NameOfField'）得到你想要比较的领域的参考。

我有一个稍微不同的答案的方法来验证匹配密码，您可能会认为，虽然：

我把我的验证方法，在一个单独的类作为一个静态方法。

export class PasswordValidation { 

    static MatchPassword(AC: AbstractControl) { 
     const formGroup = AC.parent; 
     if (formGroup) { 
      const passwordControl = formGroup.get('Password'); // to get value in input tag 
      const confirmPasswordControl = formGroup.get('Confirm'); // to get value in input tag 

      if (passwordControl && confirmPasswordControl) { 
       const password = passwordControl.value; 
       const confirmPassword = confirmPasswordControl.value; 
       if (password !== confirmPassword) { 
        return { matchPassword: true }; 
       } else { 
        return null; 
       } 
      } 
     } 

     return null; 
    } 
} 

然后我就可以在表单生成这个样子，非常类似于角的本地验证使用它：

this.registerForm = this.fb.group({ // <-- the parent FormGroup 
      Email: ['', Validators.required ], 
      Username: ['', Validators.required ], 
      FirstName: ['', Validators.required ], 
      Password: ['', 
          [ 
           Validators.required, 
           Validators.minLength(6) 
          ] 
         ], 
      Confirm: ['', 
          [ 
           Validators.required, 
           PasswordValidation.MatchPassword 
          ] 
         ] 
      });