0

I have a form in my ionic project that has 2 dropdown menus of selection ion-select.

When the user selects an option in the first dropdown menu, it generates the options in the second dropdown list. This works well.

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.

Image of error , image

This is the markup I have

     <div formArrayName="sucursales" margin-bottom>

     <!--generate new registration fields-->
     <section [formGroupName]="i" *ngFor="let tech of   form.controls.sucursales.controls; let i = index">

                <ion-item>
                    <ion-icon name="list" item-start></ion-icon>
                    <ion-label>Departamento</ion-label>
                    <ion-select [(ngModel)]="locate" name="country" #country formControlName="country" (ionChange)="CountryChange($event)">
                        <ion-option *ngFor="let department of ubicacion; let i = index" value="{{department.departamento}}">{{department.departamento}}</ion-option>
                    </ion-select>
                </ion-item>

                <ion-item *ngFor="let x of selectedMunicipality">
                    <ion-icon name="list" item-start></ion-icon>
                    <ion-label>Municipio</ion-label>
                    <ion-select [(ngModel)]="locates" name="state" #state formControlName="state">
                        <ion-option *ngFor="let municipio of x.ciudades" value="{{municipio}}">{{municipio}}</ion-option>
                    </ion-select>
                </ion-item>

And this id my code .ts:

this.http.get('http://localhost/ionic-php-mysql/colombia.json').map(res => res.json()).subscribe(
    data => {

        let headers = new Headers();
        headers.append('Content-Type', 'application/json');

        this.ubicacion = data.colombia;
    },
    error => {
        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 =>      item.departamento === value)
 }

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.

1 Answer 1

1

I finally resolved.

buildGroup(): FormGroup {

return this.fb.group({

selectedSubcategory: [""],
});


CountryChange(value, index:number) {

this.productos.controls[index]selectedMunicipality = this.ubicacion.filter(item =>        item.departamento === value)

    }

and in HTML

(ionChange)="CountryChange($event,i)"

<ion-item *ngFor="let x of tech.selectedMunicipality">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.