title: How to show md-error message for dynamic form array?
body: <p>I have a dynamic form array, If i click add contact button it will add dynamic form field after that i tried to validate the form fields(validator.required, validator.pattern etc..) and its working fine.</p>
  
  <p>When i tried to show below error message in html view</p>
  
  <pre><code>&lt;md-error *ngIf="myForm.controls.myContactArray.controls['name'].hasError('required')"&gt;
        Email is &lt;strong&gt;required&lt;/strong&gt;
      &lt;/md-error&gt;
  </code></pre>
  
  <p>getting below error message</p>
  
  <pre><code>core.es5.js:1020 ERROR TypeError: Cannot read property 'hasError' of undefined
      at Object.eval [as updateDirectives] (RegisterComponent.ngfactory.js:453)
      at Object.updateDirectives (core.es5.js:12770)
      at checkAndUpdateView (core.es5.js:12288)
      at callViewAction (core.es5.js:12651)
      at execEmbeddedViewsAction (core.es5.js:12609)
      at checkAndUpdateView (core.es5.js:12289)
      at callViewAction (core.es5.js:12651)
      at execComponentViewsAction (core.es5.js:12583)
      at checkAndUpdateView (core.es5.js:12294)
      at callViewAction (core.es5.js:12651)
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;md-card&gt;
      &lt;button (click)="addColumn()" md-raised-button&gt;Add Contacts&lt;/button&gt;
      &lt;hr&gt;
        &lt;form  [formGroup] = "myForm" (ngSubmit) = "save(myForm.value)" class="contact-form"&gt;
          &lt;div formArrayName="myContactArray"&gt;
            &lt;div *ngFor="let myGroup of myForm.controls.myContactArray.controls; let rowIndex = index" &gt;
              &lt;div [formGroupName]="rowIndex" class="make-rel"&gt;
                &lt;div class="make-abs"&gt;Row {{rowIndex + 1 }}&lt;/div&gt; &lt;!--rowIndex - Index num of newly created form--&gt;
                       &lt;button *ngIf="myForm.controls.myContactArray.controls.length" 
                      (click)="removeColumn(rowIndex)" class="make-abs removeRow" md-mini-fab&gt;&lt;md-icon&gt;close&lt;/md-icon&gt;&lt;/button&gt;
                &lt;div [formGroupName]="myGroupName[rowIndex]"&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-md-2 col-md-offset-1"&gt;
                      &lt;div class="form-group"&gt;
                        &lt;md-input-container class="example-full-width"&gt;
                          &lt;input  mdInput placeholder="Name"    formControlName ="name"&gt;
                            &lt;md-error *ngIf="myForm.controls.myContactArray.controls['name'].hasError('required')"&gt;
        Email is &lt;strong&gt;required&lt;/strong&gt;
      &lt;/md-error&gt;
  
                          &lt;/md-input-container&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-2"&gt;
                        &lt;div class="form-group"&gt;
                          &lt;md-input-container class="example-full-width"&gt;
                            &lt;input  mdInput placeholder="Email ID"    formControlName ="email"&gt;
  
  
                            &lt;/md-input-container&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="col-md-2"&gt;
                          &lt;div class="form-group"&gt;
                            &lt;md-input-container class="example-full-width"&gt;
                              &lt;input  mdInput placeholder="City"    formControlName ="city"&gt;
                              &lt;/md-input-container&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                        &lt;div class="col-md-2"&gt;
                          &lt;div class="form-group"&gt;
                            &lt;md-input-container class="example-full-width"&gt;
                              &lt;input  mdInput placeholder="Phone"    formControlName ="phone"&gt;
                              &lt;/md-input-container&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-2"&gt;
                          &lt;div class="form-group"&gt;
                            &lt;md-input-container class="example-full-width"&gt;
                              &lt;input  mdInput placeholder="Mobile"    formControlName ="mobile"&gt;
                              &lt;/md-input-container&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                         &lt;hr&gt;
                      &lt;/div&gt;
                   &lt;/div&gt;
                &lt;/div&gt;
                &lt;button md-raised-button type="submit" *ngIf="myForm.controls.myContactArray.controls.length &gt; 0"  [disabled] = "!myForm.valid"&gt;Submit&lt;/button&gt;
  
              &lt;/form&gt;
            &lt;/md-card&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>TypeScript</strong></p>
  
  <pre><code>import {Component,OnInit} from '@angular/core';
  import {FormControl,FormBuilder,FormGroup,FormArray,Validators} from '@angular/forms';
  
  const EMAIL_REGEX = /^(([^&lt;&gt;()[\]\\.,;:\s@\"]+(\.[^&lt;&gt;()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  const mobile = /06([0-9]{8})/;
  
  @Component({
      moduleId: module.id,
      selector: 'app-register',
      templateUrl: './register.component.html',
      styleUrls: ['./register.component.css']
  })
  
  
  export class RegisterComponent implements OnInit {
      public myForm: FormGroup;
  
      myGroupName = ['firstForm'];
      newName: string = "dynamicRow";
      newColumnName: string;
  
      constructor(private _FormBuilder: FormBuilder) { }
  
      ngOnInit() {
  
           this.myForm = this._FormBuilder.group({
  
              myContactArray: this._FormBuilder.array([
                  this._FormBuilder.group({
  
                      firstForm: this._FormBuilder.group({
                          formName: ['firstForm'],
                          name: ['', Validators.compose([Validators.required, Validators.minLength(3)])],
                          email: ['', Validators.compose([Validators.required, Validators.pattern(EMAIL_REGEX)])],
                          city: ['', Validators.compose([Validators.required])],
                          phone: ['', Validators.compose([Validators.required])],
                          mobile: ['', Validators.compose([Validators.required,Validators.minLength(10), Validators.maxLength(10), Validators.pattern(mobile)])],
                      })
  
                  }),
  
              ])
  
          });
      }
  
  
      insertIntoArray(columnName: any) {
  
          return this._FormBuilder.group({
              [columnName]: this._FormBuilder.group({
                  formName: [columnName],
                  name: ['', Validators.compose([Validators.required, Validators.minLength(3)])],
                  email: ['', Validators.compose([Validators.required, Validators.pattern(EMAIL_REGEX)])],
                  city: ['', Validators.compose([Validators.required])],
                  phone: ['', Validators.compose([Validators.required])],
                  mobile: ['', Validators.compose([Validators.required,Validators.minLength(10), Validators.maxLength(10), Validators.pattern(mobile)])],
  
  
              })
  
          })
  
      }
  
  
      randonFormName() {
          var newColumnName = "";
          const alpha = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
          for (var i = 0; i &lt; 5; i++)
              newColumnName += alpha.charAt(Math.floor(Math.random() * alpha.length));
          return newColumnName;
  
      }
  
  
      addColumn() {
          this.newColumnName = this.randonFormName();
          const control = &lt;FormArray&gt;this.myForm.controls['myContactArray'];
          this.myGroupName.push(this.newColumnName);
          control.push(this.insertIntoArray(this.newColumnName));
          console.log(control);
      }
  
  
  
      removeColumn(i: number) {
          const control = &lt;FormArray&gt;this.myForm.controls['myContactArray'];
          control.removeAt(i);
          this.myGroupName.splice(i, 1);
      }
  
      save(value: any) {
          console.log(value)
      }
  
  
  }
  </code></pre>