How to get data in to select in the form coontrol

Ionic Framework ionic-v3
1

Hi,
i am making an app to collect user details in this i have a Api which will give u state id based on country selected

here i need to add a select option which should dynamically filled based on country selected and next
cities should be filled based on the state selected priviously and this should not affect other form data(i.e page should not reload) how to do this

here is my html code

 <form [formGroup]="form" (ngSubmit)="submituser(form.value)">
    
                    <ion-row>
                      <ion-col>
                        <ion-list inset no-lines>
                          
                                  <ion-item>
                                 
                                  <ion-input type="text" placeholder="First name" [formControl]="form.controls['first_name']"></ion-input>
                                  </ion-item>  

                                  <ion-item>  
                                  <ion-input type="text" placeholder="Last name" [formControl]="form.controls['last_name']"></ion-input>
                                  </ion-item>

                                  <ion-item>   
                                  <ion-input type="email" placeholder="Email"  [formControl]="form.controls['email']"></ion-input>
                                  </ion-item>

                                  <ion-item>  
                                  <ion-input type="tel" placeholder="Mobile" [formControl]="form.controls['mobile']"></ion-input>
                                  </ion-item>

                                  <ion-item>  
                                  <ion-input type="password" placeholder="Password" [formControl]="form.controls['password']"></ion-input>
                                  </ion-item>


                            Here i need select option

                         <ion-select [formControl]="form.controls['country']">
                    here data should be filled based on http response 
                </ion-select>
                          
                        </ion-list>
                      </ion-col>
                    </ion-row>
      
                    <ion-row>
                      <ion-col class="signup-col">
                        <button ion-button type="submit" class="submit-btn" full color="primary" outline [disabled]="!form.valid">Submit</button>
                      </ion-col>
                    </ion-row>
      
          </form>
2

Having changes in one select affect the backing model for other selects is tricky, and the best solution I have found to date works like so:

  form: FormGroup;
  countries = ['Afghanistan', 'Azerbaijan', 'Albania'];
  statesByCountry = {
    Afghanistan: ['AfghanA', 'AfghanB', 'AfghanC'],
    Azerbaijan: ['AzerA', 'AzerB', 'AzerC'],
    Albania: ['AlbaA', 'AlbaB', 'AlbaC'],
  };
  states = [];

  constructor(fb: FormBuilder,
              private _cdr: ChangeDetectorRef) {
    this.form = fb.group({
      country: [''],
      state: [''],
    });
  }

  onCountryChange(): void {
    let country = this.form.get('country').value;
    this.states = this.statesByCountry[country];
    this._cdr.detectChanges();
  }

  <form [formGroup]="form" (ngSubmit)="onSubmit()">
    <ion-item>
      <ion-select formControlName="country" (ionChange)="onCountryChange()">
        <ion-option *ngFor="let country of countries" [value]="country">{{country}}</ion-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-select formControlName="state">
        <ion-option *ngFor="let state of states" [value]="state">{{state}}</ion-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <button ion-button>submit</button>
    </ion-item>
  </form>
7 Likes
3

thanks for replay @rapropos but i am getting data from api…using HTTP requests

here is the response looks like

["Andhra Predesh","Karnataka"]

                      <ion-item>
                      <ion-label>State</ion-label>
                      <ion-select (click)="loadState()" [(ngModel)]="localUser.state">
                      <ion-option *ngFor="let states of state" [value]="states">{{states}}</ion-option>
                      </ion-select>
                      </ion-item>

here is my .ts code

     loadState() {
        let list = this.authuser.getStateList();
        list.then(data => {this.state = data;});
      }

state is having the value but nt able to show in options

1 Like
4

I don’t think (click) on the state select is the proper place to call loadState(). It should be done on (ionChange) on the control that chooses the country. That way change detection gets a chance to run before the state select is popped.

5

@rapropos i tried using both (click) and (ionchange) its getting the response but problem is

: when i use Click method its not showing data in option in the first click of select…but from second click it is showing data in list

:when i use ionchange method this i not showing data till i press okay in select for first time…from second it is showing data

6

This is why I included the ChangeDetectorRef. When you are reacting to a change event and repopulating a backing property, Angular’s change detection doesn’t have time to figure it out, so you have to goose it manually.

3 Likes
7

Thanks @rapropos it Working

1 Like