2017-11-21 12 views
-3

これは私がパスワードを確認する方法です、パスワード&のメールを確認し、メールを確認してください。あなたが見ることができるように私は電子メールとパスワードの検証をチェックするために呼び出される関数fieldMatcherを持っています。角度応答形式でカスタムバリデータ関数にパラメータを渡すにはどうすればよいですか?

// Works 

createForm() { 
      this.formGroup = this._formBuilder.group({ 
       firstName: '', 
       lastName: '', 
       email: '', 
       confirmEmail: '', 
       password: '', 
       confirmPassword: '', 
      }, {validator: this.fieldMatcher}); 
     } 
     fieldMatcher(c: AbstractControl): { invalid: boolean } { 
      if (c.get('password').value !== c.get('confirm').value) { 
       return {invalid: true}; 
      } 
      if (c.get('email').value !== c.get('confirmEmail').value) { 
       return {invalid: true}; 
      } 
     } 
    } 

あなたvalue1value2にはないので、私は、私は以下のようなコードを減らすようにパラメータとしてfieldMatcher機能にコントロールを渡すが、それが動作しない、

// Do not Work 
createForm() { 
     this.formGroup = this._formBuilder.group({ 
      firstName: '', 
      lastName: '', 
      email: '', 
      confirmEmail: '', 
      password: '', 
      confirmPassword: '', 
     },{validator: this.fieldMatcher(value1, value2)}); 
     } 
     fieldMatcher(c: AbstractControl, value1, value2): { invalid: boolean } { 
      if (c.get(value1).value !== c.get(value2).value) { 
       return {invalid: true}; 
      } 
     } 

答えて

0

ザッツたいですいずれにも対応しています。 value1value2の代わりにキーを送信する必要があります。以下の例から参考にしてください。

ワーキングPlunker:http://plnkr.co/edit/RlWslfyr1eiTq4MSc3iY?p=preview

import {Component, FormBuilder, Control, ControlGroup, Validators} from 'angular2/angular2' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <form [ng-form-model]="form"> 
     <label for="name">Name:</label> 
     <input id="name" type="text" ng-control="name"> 
     <br> 
     <div ng-control-group="matchingEmail"> 
     <label for="email">Email:</label> 
     <input id="email" type="email" ng-control="email"> 
     <br> 
     <label for="confirmEmail">Confirm Email:</label> 
     <input id="confirmEmail" type="email" ng-control="confirmEmail"> 
     </div> 
     <br> 
     <div ng-control-group="matchingPassword"> 
     <label for="password">Password:</label> 
     <input id="password" type="password" ng-control="password"> 
     <br> 
     <label for="confirmPassword">Confirm Password:</label> 
     <input id="confirmPassword" type="password" ng-control="confirmPassword"> 
     </div> 
    </form> 
    <p>Valid?: {{form.valid}}</p> 
    <pre>{{form.value | json}}</pre> 
    ` 
}) 
export class App { 
    form: ControlGroup 
    constructor(fb: FormBuilder) { 
    this.form = fb.group({ 
     name: [''], 
     matchingEmail: fb.group({ 
     email: ['', Validators.required], 
     confirmEmail: ['', Validators.required] 
     }, {validator: this.fieldMatcher('email','confirmEmail')}), 
     matchingPassword: fb.group({ 
     password: ['', Validators.required], 
     confirmPassword: ['', Validators.required] 
     }, {validator: this.fieldMatcher('password','confirmPassword')}) 
    }); 
    } 

fieldMatcher(value1: string, value2: string) { 
    return (group: ControlGroup) => { 
    if (group.controls[value1].value !== group.controls[value2].value) { 
     return group.controls[value2].setErrors({notEquivalent: true}) 
    } 
    } 
} 

} 
+0

しかし、抽象コントロールはここですか? – Karty

+0

私はcontrolGroupを使用してデータにアクセスしています。抽象的なコントロールを使用するように私の見直しをしてください。あなたが間違って行ったその論理。 –

+0

どのようにACで改訂?エラーを示すcoz。 – Karty

関連する問題