title: Angular: Adding events to FormControls added dynamically in FormArray
body: <p>I'm using <code>Angular 4</code> and I'm creating a page where user can create a format consists of Hash, sequence and constant value. User can add them in any order,so for this purpose I'm creating them dynamically using <code>FormArray</code></p>
  
  <p>HTML Code is:</p>
  
  <pre><code> &lt;div formArrayName="components"
      *ngFor="let c of components.controls; let i=index"&gt;
     &lt;div [formGroupName]="i"&gt;
       &lt;div class="form-group row"&gt;
         &lt;div class="col-md-3"&gt;
           &lt;select type="" id="component" class="form-control" placeholder="" 
               formControlName="component"&gt;
             &lt;option value="Sequence"&gt;Sequence&lt;/option&gt;
             &lt;option value="Hash"&gt;Hash&lt;/option&gt;
             &lt;option value="Constant"&gt;Constant&lt;/option&gt;
           &lt;/select&gt;
         &lt;/div&gt;
         &lt;div class="col-md-2"&gt;
          &lt;input type="number" class="form-control" formControlName="limit" /&gt;
         &lt;/div&gt;
         &lt;div class="col-md-4"&gt;
          &lt;input type="text" class="form-control" formControlName="value" /&gt;
         &lt;/div&gt;
         &lt;div class="col-md-2" style="color:red" (click)="deleteRow(i)"&gt;
             &lt;fa name="times"&gt;&lt;/fa&gt;
         &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>The code above will produce an output like this.
  <a href="https://i.stack.imgur.com/uP0qz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uP0qz.png" alt="enter image description here"></a></p>
  
  <p><strong>Question</strong> How to bind events with these dynamically created controls? For example on selection of certain value in drop down I want to hide the input control next to it.</p>