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

问题描述：

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

这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

你能不能也发表您的'passwordnew.component.html'？ – yurzui

答

我想你可以调用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 
          ] 
         ] 
      });

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

相关推荐