title: Ionic 4 ion-select dynamically generated two dropdown based on first dropdown selection, How do I clear the second dropdown?
body: <p>I have a form in my ionic project that has 2 dropdown menus of selection ion-select.</p>
  
  <p>When the user selects an option in the first dropdown menu, it generates the options in the second dropdown list. This works well. </p>
  
  <p>When I add new fields, I can reestablish the values of the first list displayed with [(ngModel)] = null in .ts, but I have not been able to reestablish those in the 2 drop-down list.</p>
  
  <p><a href="https://i.stack.imgur.com/o5ARt.jpg" rel="nofollow noreferrer">Image of error</a>
  ,
  <a href="https://i.stack.imgur.com/XNXT9.png" rel="nofollow noreferrer">image</a></p>
  
  <p>This is the markup I have</p>
  
  <pre><code>     &lt;div formArrayName="sucursales" margin-bottom&gt;
  
       &lt;!--generate new registration fields--&gt;
       &lt;section [formGroupName]="i" *ngFor="let tech of   form.controls.sucursales.controls; let i = index"&gt;
  
                  &lt;ion-item&gt;
                      &lt;ion-icon name="list" item-start&gt;&lt;/ion-icon&gt;
                      &lt;ion-label&gt;Departamento&lt;/ion-label&gt;
                      &lt;ion-select [(ngModel)]="locate" name="country" #country formControlName="country" (ionChange)="CountryChange($event)"&gt;
                          &lt;ion-option *ngFor="let department of ubicacion; let i = index" value="{{department.departamento}}"&gt;{{department.departamento}}&lt;/ion-option&gt;
                      &lt;/ion-select&gt;
                  &lt;/ion-item&gt;
  
                  &lt;ion-item *ngFor="let x of selectedMunicipality"&gt;
                      &lt;ion-icon name="list" item-start&gt;&lt;/ion-icon&gt;
                      &lt;ion-label&gt;Municipio&lt;/ion-label&gt;
                      &lt;ion-select [(ngModel)]="locates" name="state" #state formControlName="state"&gt;
                          &lt;ion-option *ngFor="let municipio of x.ciudades" value="{{municipio}}"&gt;{{municipio}}&lt;/ion-option&gt;
                      &lt;/ion-select&gt;
                  &lt;/ion-item&gt;
  </code></pre>
  
  <p>And this id my code .ts:</p>
  
  <pre><code>this.http.get('http://localhost/ionic-php-mysql/colombia.json').map(res =&gt; res.json()).subscribe(
      data =&gt; {
  
          let headers = new Headers();
          headers.append('Content-Type', 'application/json');
  
          this.ubicacion = data.colombia;
      },
      error =&gt; {
          console.log("Oops!", error);
      }
  
  );
  CountryChange(value: string) {
  
        this.locate = null;  //It works well
        this.locates = null; //it does not work
  
        this.selectedMunicipality = this.ubicacion.filter(item =&gt;      item.departamento === value)
   }
  </code></pre>
  
  <p>I want the second ion-select to select according to the first ion-select, and if I add new fields dynamically that the new values are independent.</p>