角度2のパスワード照合にエラーが発生しました

Question

すべての方法を試しましたが、最終的にこのエラーが発生しています。

Cでのエラー：/laragon/www/myapp/src/app/registration/registration.component.ts（30,9）： 'validator：any;型の引数。 } 'は' ValidatorFn 'タイプのパラメータには ssignableではありません。 オブジェクトリテラルは既知のプロパティのみを指定でき、 'validator'は 'ValidatorFn'タイプに存在しません。

は、ここに私のコンポーネントのコードです：

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormControl, Validators, Validator, ValidatorFn } from '@angular/forms'; 
//import { emailValidator, matchingPasswords } from '../../app/validators/validators'; 

@Component({ 
    selector: 'app-registration', 
    templateUrl: './registration.component.html', 
    styleUrls: ['./registration.component.css'] 
}) 
export class RegistrationComponent implements OnInit { 
    private RegistrationForm: FormGroup; 
    constructor() { } 

    ngOnInit() { 
     this.RegistrationForm = new FormGroup({ 
      firstname: new FormControl(null, [ 
       Validators.required, 
       Validators.minLength(3) 
      ]), 
      email: new FormControl(null, [ 
       Validators.required, 
       Validators.pattern(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/) 
      ]), 
      passwords: new FormControl(null, [ 
       Validators.required, 
       Validators.minLength(6) 
      ]), 
      confirmpwd: new FormControl(null, [ 
       Validators.required 
      ]), 
     }, { validator: matchingPasswords.bind('passwords', 'confirmpwd') }); 

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

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

Answer 1

それはValidatorFnとして認識されていない、あなたのmatchingPasswords機能のように見え、それが異なる引数を持っているので、私はその思い。 ValidatorFnは代わりにAbstractControlを渡すことを期待しています。ここで

はwhere the ValidatorFn interface is declaredへのリンクで、インターフェースは次のようになります。ここでは

export interface ValidatorFn { (c: AbstractControl): ValidationErrors|null; } 

私はあなたのバリデータを書き込む方法の例です：

matchingPasswords(c: AbstractControl): {[key: string]: any} { 
    let password = c.get(['passwords']); 
    let confirmPassword = c.get(['confirmpwd']); 

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

角度がいるだろうmatchingPasswordsにformGroupを渡しますgetter get（）を使用してパスワードにアクセスします。

あなたは、このようなあなたのフォームグループに追加することができます：私は私のサービスにインポートすることができるバリデータクラス内のすべての私のバリデータを置くのが好きところで

this.RegistrationForm = new FormGroup({ 
    firstname : new FormControl(null,[ 
    Validators.required, 
    Validators.minLength(3) 
    ]), 
    email : new FormControl(null,[ 
    Validators.required, 
    Validators.pattern(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/) 
    ]), 
    passwords : new FormControl(null,[ 
    Validators.required, 
    Validators.minLength(6) 
    ]), 
    confirmpwd : new FormControl(null,[ 
    Validators.required 
    ]), 
}, {validator: matchingPasswords}); 

。それは同様にそれをするのに役立つかもしれません。

export class FormValidator { 

    static nonEmpty(control: any) { 
    if (!control.value || control.value.length === 0) { 
     return { 'noElements': true }; 
    } 
    return null; 
    } 


    matchingPasswords(c: AbstractControl): {[key: string]: any} { 
    let password = c.get(['passwords']); 
    let confirmPassword = c.get(['confirmpwd']); 

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

そして、あなたはこのようなあなたの形でそれを使用することができます。

{ validator: FormValidator.matchingPasswords } 

幸運を！

Answer 2

これは、技術的にはこれの複製である可能性があります。Repeat password validation not working（私も前にリンクしました）。

しかし、コードを試してみるときに「新しい発見」を指摘したかったのです。 Plunkerの正確なエラーを再現できませんでしたが、はがエラーになるように管理しました。何らかの理由により、フォームを構築するときにnew FormGroup()を使用するとエラーがスローされます。私はではないなぜこれが知っている、と誰かが私に教えてくれるなら、私は幸せだろう！ :)

だから、少なくともplunkerにすべてが代わりにFormBuilderを使用するときに罰金のようだ：

constructor(private fb: FormBuilder) { } // inject formbuilder 

ngOnInit() { 
    this.RegistrationForm = this.fb.group({ 
    firstname: new FormControl(null, [ 
      Validators.required, 
      Validators.minLength(3) 
     ]), 
     email: new FormControl(null, [ 
      Validators.required, 
      Validators.pattern(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/) 
     ]), 
    passwords : new FormControl(null,[ 
     Validators.required, 
     Validators.minLength(6) 
    ]), 
    confirmpwd : new FormControl(null,[ 
    Validators.required 
    ]),   
    },{validator: this.matchingPasswords}) // remember to use 'this' 
} 

そして、基本的に（で提供されたものの正確なコピーであるmatchingPasswords -function、私の）この答えの冒頭に記載されたリンクの答え。

matchingPasswords = (control: AbstractControl): {[key: string]: boolean} =>{ 

    const newPassword = control.get('passwords'); 
    const confirmPassword = control.get('confirmpwd'); 
    // if no values, valid 
    if (!newPassword || !confirmPassword) { 
    return null; 
    } 
    // if values match return null, else 'mismatchedPasswords:true' 
    return newPassword.value === confirmPassword.value ? null : { mismatchedPasswords: true }; 
}  

最後にDEMO。