2016-09-06 15 views
1

フォームの基本的なクロスフィールド検証の作成には成功しません。角2 rc.6です。クロスフィールド検証 - Angular2 RC6

constructor(private fb: FormBuilder) { 
    this.signUpForm = fb.group({ 
     "firstName": ["", Validators.required], 
     "lastName": ["", Validators.required], 
     "email": ["", [Validators.required, ValidationService.emailValidator]], 
     "password": ["", [Validators.required, ValidationService.passwordValidator]], 
     "passwordConfirm": ["", [Validators.required]] 
    }, {validator: this.matchingPasswords('password', 'confirmPassword')}); 

    this.firstName = this.signUpForm.controls["firstName"]; 
    this.lastName = this.signUpForm.controls["lastName"]; 
    this.email = this.signUpForm.controls["email"]; 
    this.password = this.signUpForm.controls["password"]; 
    this.passwordConfirm = this.signUpForm.controls["passwordConfirm"]; 
} 

matchingPasswords(passwordKey: string, confirmPasswordKey: string) { 
    return (group: ControlGroup): {[key: string]: any} => { 
     let password = group.controls[passwordKey]; 
     let confirmPassword = group.controls[confirmPasswordKey]; 

     if (password.value !== confirmPassword.value) { 
      return { 
       mismatchedPasswords: true 
      }; 
     } 
    } 
} 

私はポストCross field validation in Angular2を見てきましたが、ポイントは、私は角2 rc.6を使用していますということです。アンギュラ2 rc.6で

ControlGroupは共通/角度 @何 からより入手可能であり、角度@更新の一部ではない/私はFormBuilder, Validators, AbstractControl, FormGroupを得るを形成しません。

私の方法matchingPasswordsがもう機能していないため、2つのパスワードが一致しているかどうかを確認できません。

私はの代わりに何を使用すべきか知っていますか??私はちょうど同じ問題だけでなく、@ギュンターZöchbauerによって強調FormGroupの問題を持っていた

+0

これは今、 'FormGroup'と呼ばれています。 –

答えて

0

、あなたは{バリデータを削除する必要が:,

ので

, {validator: this.matchingPasswords('password', 'confirmPassword')} 

になるために必要
, this.matchingPasswords('password', 'confirmPassword') 
0

ギュンターZö[email protected] @おかげで、私はformgroupでControlGroupを置き換えて、私は{ validator:,をドロップし、現在アプリが実行されています。

ただし、matchingPasswordsはフォームの有効性には影響しないようです。このメソッドを変更して更新する方法はありますか?

また、私はメソッドが呼び出されないと思う:私の経験では「バリ」キーがまだ(作業するフォームグループの検証を取得するために必要だった、

matchingPasswords(passwordKey: string, confirmPasswordKey: string) { 
    return (group: FormGroup): {[key: string]: any} => { 
     let password = group.controls[passwordKey]; 
     let confirmPassword = group.controls[confirmPasswordKey]; 

     console.log(password, confirmPassword); 

     if (password.value !== confirmPassword.value) { 
      return { 
       mismatchedPasswords: true 
      }; 
     } 
     else { 
      return null; 
     } 
    } 
} 
3

は、他のコメントで言及されているものに対して行きますこれがAngular2 Finalにあることに注意してください)。

これは角のウェブサイト上のFormGroupドキュメントからパスワードマッチバリです:

this.passwordForm = fb.group({ 
     password: ["",[]], 
     confirmPassword: ["",[]] 
    }, this.passwordMatchValidator); 

    passwordMatchValidator(g : FormGroup){ 
     return g.get('password').value === g.get('confirmPassword').value ? null : {'mismatch': true}; 
    } 

しかし、これは「バリ」を追加するまで動作しませんでした:

this.passwordForm = fb.group({ 
    password: ["",[]], 
    confirmPassword: ["",[]] 
}, {'validator': this.passwordMatchValidator}) 

はControlGroupはまだ置き換えられますFormGroup、APIの変更に応じて

関連する問題