title: Angular 7 - Multiple Dropdowns Selection Change
body: <p>I have a form array, the array consists of formGroup with <code>brand</code> and <code>model</code>.</p>
  
  <p><strong>Component:</strong></p>
  
  <pre><code>get brands() {
    return this.form.get('groups') as FormArray;
  }
  
  addGroup() {
    this.groups.push(
      this.fb.group({
        brand: ['', Validators.required],
        model: ['', Validators.required]
      })
    );
  }
  
  removeGroup(index: number) {
    this.models.removeAt(index);
  }
  
  brandSelect(event: any) {
    // I dispatch an action to get the models from the smart component
    this.selectedBrand.emit(event);
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ng-container formArrayName="groups" *ngIf="groups"&gt;
    &lt;div&gt;
      &lt;a href="javascript:void(0)" (click)="addGroup()"&gt;
        &lt;small&gt;
          &lt;i class="fas fa-plus-circle fa-fw margin-xs-r"&gt;&lt;/i&gt; Add Group
        &lt;/small&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div *ngFor="let control of groups.controls; index as i"&gt;
      &lt;div class="text-right margin-sm-b"&gt;
        &lt;a (click)="removeGroup(i)"&gt; &lt;i class="fas fa-times fa-fw"&gt;&lt;/i&gt; &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;ng-container [formGroupName]="i"&gt;
        &lt;mat-form-field appearance="outline"&gt;
          &lt;mat-label&gt;Brand&lt;/mat-label&gt;
          &lt;!--Based on the brand selected I dispatch an action to get the models.--&gt;
          &lt;mat-select
            formControlName="brand"
            (selectionChange)="brandSelect($event)"
          &gt;
            &lt;mat-option *ngFor="let brand of brands" [value]="brand"&gt;
              {{ brand | titlecase }}
            &lt;/mat-option&gt;
          &lt;/mat-select&gt;
        &lt;/mat-form-field&gt;
  
        &lt;mat-form-field appearance="outline"&gt;
          &lt;mat-label&gt;Model&lt;/mat-label&gt;
          &lt;mat-select formControlName="model"&gt;
            &lt;mat-option *ngFor="let model of models" [value]="model"&gt;
              &lt;i class="fas fa-angle-right fa-fw margin-xs-r"&gt;&lt;/i&gt; {{ model }}
            &lt;/mat-option&gt;
          &lt;/mat-select&gt;
        &lt;/mat-form-field&gt;
      &lt;/ng-container&gt;
    &lt;/div&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p><code>brand</code> and <code>model</code> is a dropdown. I show the list of models based on the brand selected, I dispatch an action on brand <code>selectionChange</code> to get the list of models.</p>
  
  <p>As the model is an Observable which I've subscribed to. Everything works fine when I have only one item in the form array. The moment I add another group, on brand <code>selectionChange</code> the <code>model</code> observable gets updated with the latest data and the <code>model</code> in the first <code>group</code> goes blank because a different brand was selected from the second group.</p>
  
  <p>How can I handle this situation while I'm using NGRX?</p>