角2のフォーム：FormControlエラーにアクセスできない

Question

私はよく理解していると思ったフォームコントロールで作業しています。今私はコントロールを作成し、それぞれのバリデータを割り当てる関数を持っています。

this.password1:FormControlとthis.password2:FormControlの場合、errors:{required: true, pattern:true}のようなエラーオブジェクトがあるはずです。ただし、patternプロパティはどちらのエラーオブジェクトにも表示されません。さらにValidators.minLength(8)をthis.password2 FormControlに追加して、動作していて、minLengthエラープロパティも表示されないかどうかを確認しました。裏返しは 'this.email'にerrors: {required: true, email: true}で正しいエラーがあります。

注：：フォームの有効性をテストするとき。それは、パターンチェックと最小長さチェックを行います。私は、作成されるはずのエラープロパティにアクセスすることはできません。私がconsole.logに書いたFormContrilのエラープロパティーはerrors:{required: true}です。

エラーのプロパティが作成されていない理由について、助けてください。ハッピー感謝祭！

ngOnInit() { 
 
    this.title.setTitle(this.pageTitle); 
 
    this.createFormControls(); 
 
    this.createForm(); 
 
    } 
 

 
    createFormControls(): void { 
 
    const mediumRegex = new RegExp('(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})'); 
 

 
    this.email = new FormControl('', Validators.compose([Validators.required, Validators.email])); 
 
    this.firstName = new FormControl('', Validators.compose([Validators.required])); 
 
    this.lastName = new FormControl('', Validators.compose([Validators.required])); 
 
    this.password1 = new FormControl('', Validators.compose([Validators.required, Validators.pattern(mediumRegex)])); 
 
    this.password2 = new FormControl('', Validators.compose([Validators.minLength(8), Validators.required, Validators.pattern(mediumRegex)])); 
 

 
    console.log(this.email); 
 
    } 
 

 
    matchPassword(AC: AbstractControl): any { 
 
    const password1 = AC.get('password1').value; // to get value in input tag 
 
    const password2 = AC.get('password2').value; // to get value in input tag 
 
    if (password1 !== password2) { 
 
     // console.log('false'); 
 
     AC.get('password2').setErrors({'MatchPassword': true}); 
 
     // console.log(AC); 
 
     // console.log(this.registrationForm); 
 
    } else { 
 
     // console.log('true'); 
 
     return null; 
 
    } 
 
    } 
 

 
    createForm(): void { 
 

 
    this.registrationForm = this.fb.group({ 
 
     email: this.email, 
 
     firstName: this.firstName, 
 
     lastName: this.lastName, 
 
     password1: this.password1, 
 
     password2: this.password2, 
 
    }, { 
 
     validator: this.matchPassword // your validation method 
 
    }); 
 
    }

Answer 1

基本的には、フォームのバリデータを上書きしていることから、その行が退治されているため、このラインの

AC.get('password2').setErrors({'MatchPassword': true}); 

すべての検証結果を見ていません以前の妥当性検査の結果とその結果を入れるだけです。

これまで同様のシナリオで行ってきたことは、これらのパスワードコントロールをラップして自分のカスタムバリデータ関数のみを割り当てる入れ子フォームグループを定義することです。だからあなたのフォームの宣言は次のようになります。

this.registrationForm = this.fb.group({ 
    email: this.email, 
    firstName: this.firstName, 
    lastName: this.lastName, 
    passwords: this.fb.group({ 
    password1: this.password1, 
    password2: this.password2 
    }, {validator: this.matchPassword}) // your validation method}) 
}); 

私はあなたがそれぞれのケースについて検証エラーに達することができる方法をよりよく説明するためplunkerを用意しました（結果だけを見るために提出ヒット）https://plnkr.co/edit/94VUlt8K5SvWXBGcW6Qx