title: Angular 4 array validation
body: <p>I need help with <code>formArray</code> validation in <strong>reactive form</strong>. I want validate each item in array, but i have no idea how can i do that. Thanks.</p>
  
  <p><strong>html code:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;label for="name"&gt;name:&lt;/label&gt;
      &lt;input formControlName="name" id="name" type="text"&gt;
      &lt;div *ngIf="name.invalid &amp;&amp; (name.dirty || name.touched)"&gt;
         &lt;div *ngIf="name.errors.required"&gt;
           required
         &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>TypeScript code:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code> createForm() {
      this.form = this.fb.group({
        person: this.fb.array([this.initItemRows()])
      });
    }
  
  initItemRows() {
      return this.fb.group({
        name: [''],
        info: ['']
      });
    }
  
    addNewRow() {
      const control = &lt;FormArray&gt;this.form.controls['person'];
      control.push(this.initItemRows());
    }
  
    deleteRow(index: number) {
      const control = &lt;FormArray&gt;this.form.controls['person'];
      control.removeAt(index);
    }
  
    get name() { return this.form.get('person.name'); }
    get info() { return this.form.get('person.info'); }
  </code></pre>
  
  <p><strong>I tried this:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>initItemRows() {
      return this.fb.group({
        name: ['', Validators.required ],
        info: ['', Validators.required ]
      });
    }
  </code></pre>
  
  <p>It doesnt work..</p>