未定義のプロパティ 'touched'を読み取ることができません

Question

なぜこのエラーが発生します未定義のプロパティを読み取ることができません？

なぜそれがformName.controls['email'].touchedを読み取ることができませんが、我々はformName.get('custdetails.email').touchedを使用する場合formName.get('custDetails').touched

<form [formGroup]="formName"> 
<fieldset formGroupName="custdetails"> 
    <div class="form-group" [ngClass]="{'has-error': formName.controls['email'].touched 
       && formName.controls['email'].hasError('invalidEmailAddress')}"> 
     <label class="control-label">Email</label> 
     <input type="text" class="form-control" 
       formControlName="email" name="email" required /> 
    </div> 
</fieldset>   

</form> 

を読み、そのこと...私は以下

TypeError: _this.subscribe is not a function at eval (http://localhost:3000/node_modules/rxjs/operator/toPromise.js:68:15) at new ZoneAwarePromise (http://localhost:3000/node_modules/zone.js/dist/zone.js:551:29) at Object.toPromise (http://localhost:3000/node_modules/rxjs/operator/toPromise.js:66:12) at _convertToPromise (http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:541:73) at Array.map (native) at FormControl.eval [as asyncValidator] (http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:530:101) at FormControl.AbstractControl._runAsyncValidator (http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:2670:62) at FormControl.AbstractControl.updateValueAndValidity (http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:2630:26) at FormControl.setValue (http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:2988:18) at DefaultValueAccessor.eval [as onChange] (http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:1658:21) at Wrapper_DefaultValueAccessor.handleEvent (/InternalFormsSharedModule/DefaultValueAccessor/wrapper.ngfactory.js:29:34) at CompiledTemplate.proxyViewClass.View_ReactiveFormComponentFive0.handleEvent_36 (/AppModule/ReactiveFormComponentFive/component.ngfactory.js:717:45) at CompiledTemplate.proxyViewClass.eval (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12397:41) at HTMLInputElement.eval (http://localhost:3000/node_modules/@angular/platform-browser//bundles/platform-browser.umd.js:3224:57) at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:275:35)

以下ERROを取得し、私のフォームがどのようにあります構成：

ngOnInit() { 
    this.formName = this.fb.group({ 
     name: ["", [Validators.required]], 
     custdetails: this.fb.group({ 
      email: ["", Validators.required, ValidationHelper.emailValidator], 
      confirm: ["", Validators.required] 
     }, { 
      validator: ValidationHelper.emailMatcher 
     }) 

    }) 
} 

私のメールvalida TOR：

static emailValidator = (control: AbstractControl) : {[key: string]: boolean} =>{ 
     // RFC 2822 compliant regex 
     if (control.value.match(/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/)) { 
      return null; 
     } else { 
      return { 'invalidEmailAddress': true }; 
     } 
    } 

Answer 1

フィールドへの完全なパスは次のとおりです。

formName.get('custdetails.email') 

あなたがアクセスする必要がある：

formName.get('custdetails.email').touched 

また、フォームのモデルでエラーが発生しています。複数のバリデータは、同じフィールドに適用される場合、それらは、アレイ内にラップされるべきである：別のパラメータように、2つのバリデータを通過させることによって

// Replace that: 
email: ["", Validators.required, ValidationHelper.emailValidator] 
// With this: 
// Notice the additional [ ] around the validators 
email: ["", [Validators.required, ValidationHelper.emailValidator]] 

、角度は非同期バリように、第2のバリemailValidatorを解釈し、それはしようとしますそれを購読する。したがって、エラーメッセージ "_this.subscribeは関数ではありません"。