角活性形式的密碼驗證匹配

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 
          ] 
         ] 
      });