title: Cannot read property 'touched' of undefined
body: <p>Why am i getting this error <strong>Cannot read property touched of undefined</strong>? </p>
  
  <p>Why is it not able to read <code>formName.controls['email'].touched</code> but its able to read <code>formName.get('custDetails').touched</code></p>
  
  <pre><code>&lt;form [formGroup]="formName"&gt;
  &lt;fieldset formGroupName="custdetails"&gt;
      &lt;div class="form-group" [ngClass]="{'has-error': formName.controls['email'].touched 
                  &amp;&amp; formName.controls['email'].hasError('invalidEmailAddress')}"&gt;
          &lt;label class="control-label"&gt;Email&lt;/label&gt;
          &lt;input type="text" class="form-control" 
                  formControlName="email" name="email" required /&gt;
      &lt;/div&gt;
  &lt;/fieldset&gt;        
  
  &lt;/form&gt;
  </code></pre>
  
  <p>When we use <code>formName.get('custdetails.email').touched</code> ... i get the below erro</p>
  
  <blockquote>
    <p>TypeError: _this.subscribe is not a function
        at eval (<a href="http://localhost:3000/node_modules/rxjs/operator/toPromise.js:68:15" rel="noreferrer">http://localhost:3000/node_modules/rxjs/operator/toPromise.js:68:15</a>)
        at new ZoneAwarePromise (<a href="http://localhost:3000/node_modules/zone.js/dist/zone.js:551:29" rel="noreferrer">http://localhost:3000/node_modules/zone.js/dist/zone.js:551:29</a>)
        at Object.toPromise (<a href="http://localhost:3000/node_modules/rxjs/operator/toPromise.js:66:12" rel="noreferrer">http://localhost:3000/node_modules/rxjs/operator/toPromise.js:66:12</a>)
        at _convertToPromise (<a href="http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:541:73" rel="noreferrer">http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:541:73</a>)
        at Array.map (native)
        at FormControl.eval [as asyncValidator] (<a href="http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:530:101" rel="noreferrer">http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:530:101</a>)
        at FormControl.AbstractControl._runAsyncValidator (<a href="http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:2670:62" rel="noreferrer">http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:2670:62</a>)
        at FormControl.AbstractControl.updateValueAndValidity (<a href="http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:2630:26" rel="noreferrer">http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:2630:26</a>)
        at FormControl.setValue (<a href="http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:2988:18" rel="noreferrer">http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:2988:18</a>)
        at DefaultValueAccessor.eval [as onChange] (<a href="http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:1658:21" rel="noreferrer">http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:1658:21</a>)
        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 (<a href="http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12397:41" rel="noreferrer">http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12397:41</a>)
        at HTMLInputElement.eval (<a href="http://localhost:3000/node_modules/@angular/platform-browser//bundles/platform-browser.umd.js:3224:57" rel="noreferrer">http://localhost:3000/node_modules/@angular/platform-browser//bundles/platform-browser.umd.js:3224:57</a>)
        at ZoneDelegate.invokeTask (<a href="http://localhost:3000/node_modules/zone.js/dist/zone.js:275:35" rel="noreferrer">http://localhost:3000/node_modules/zone.js/dist/zone.js:275:35</a>)</p>
  </blockquote>
  
  <p>Below is how my form is construct:</p>
  
  <pre><code>ngOnInit() {
      this.formName = this.fb.group({
         name: ["", [Validators.required]], 
         custdetails: this.fb.group({
              email: ["", Validators.required, ValidationHelper.emailValidator],
              confirm: ["", Validators.required]
          }, {
              validator: ValidationHelper.emailMatcher
          })
  
      })
  }
  </code></pre>
  
  <p>And my email validator:</p>
  
  <pre><code>static emailValidator = (control: AbstractControl) : {[key: string]: boolean} =&gt;{
          // RFC 2822 compliant regex
          if (control.value.match(/[a-z0-9!#$%&amp;'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&amp;'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/)) {
              return null;
          } else {
              return { 'invalidEmailAddress': true };
          }
      }
  </code></pre>