Setting field values dynamically from rest api

Ionic Framework ionic-v3
1

Hi, I have two dropdown fields 1. Gender where we have 2options {Male ,Female} 2. Relations where we have options like{ Son, Daughter…etc} I selected some options initially and submitted, now I wanted to update with new selected values for that I need to display previously selected values in the respective fields.

Here is my code:

update.html

<form [formGroup]="addfamily_form" (ngSubmit)="onSubmit()" autocomplete="off">

    <ion-row>
      <ion-col>
        <ion-list inset *ngFor="let inputs of memberDetails"> 
<!--Gender-->
 <div [ngClass]="{'has-error': (addfamily_form.controls.Gender.errors && addfamily_form.controls.Gender.dirty), 'has-success': !addfamily_form.controls.Gender.errors}">
            <ion-item>
              <ion-label stacked primary>Gender</ion-label>
              <ion-select formControlName="Gender" id="Gender" [value]="inputs.MF_Gender">
                <ion-option>Male</ion-option>
                <ion-option>Female</ion-option>
              </ion-select>
            </ion-item>
          </div>
          <p *ngIf="addfamily_form.controls.Gender.errors?.required && addfamily_form.controls.Gender.dirty ">This field is required</p>

 <!--Relations-->
          <div [ngClass]="{'has-error': (addfamily_form.controls.Relation.errors && addfamily_form.controls.Relation.dirty), 'has-success': !addfamily_form.controls.Relation.errors}">
            <ion-item>
              <ion-label stacked primary>Relation</ion-label>
              <ion-select formControlName="Relation" id="Relation" [value]="inputs.Relationship">

                <ion-option *ngFor="let relation of relations" value="{{relation.MRM_Id}}" >{{relation.MRM_Relation}}</ion-option>
              </ion-select>
            </ion-item>
          </div>
          <p *ngIf="addfamily_form.controls.Relation.errors?.required && addfamily_form.controls.Relation.dirty ">This field is required</p>
 </ion-list>
      </ion-col>
    </ion-row>
 </form>

here I am accessing two services, one is for display previously selected options before changing with new options. another one for display number of relations. I tried same for Input fields there everything going fine.

 <!--First name-->
          <div [ngClass]="{'has-error': (addfamily_form.controls.FirstName.errors && addfamily_form.controls.FirstName.dirty), 'has-success': !addfamily_form.controls.FirstName.errors}">
            <ion-item>
              <ion-label stacked primary>First Name</ion-label>
              <ion-input type="text" name="FirstName" id="FirstName" spellcheck="false" autocapitalize="off" autocomplete="off" formControlName="FirstName" [value]="inputs.MF_FirstName">
              </ion-input>
            </ion-item>
          </div>
          <p *ngIf="addfamily_form.controls.FirstName.errors?.required && addfamily_form.controls.FirstName.dirty">This field is required</p>
          <p *ngIf="addfamily_form.controls.FirstName.errors?.minlength && addfamily_form.controls.FirstName.dirty || addfamily_form.controls.FirstName.errors?.maxlength && addfamily_form.controls.FirstName.dirty ">Minimum characters: 3, Maximum characters: 15</p>
          <p *ngIf="addfamily_form.controls.FirstName.errors?.validateFirstName && addfamily_form.controls.FirstName.dirty">FirstName must not have any special characters</p>

here is my screenshot , displaying fields values were previously submitted by user.

Screenshot_1504534178
Screenshot_1504534178.png1080×1920 101 KB

I was not able to getting values dynamically for Gender and Relationship. please help me !!

2

You can you use the selected property at the ion-option element something like this:

<ion-option *ngFor="let relation of relations" 
                    value="{{relation.MRM_Id}}"
                    [selected]="relation.MRM_Id == Your value return from api"
 >{{relation.MRM_Relation}}
</ion-option>

Hope this helps a bit

3

@wingly’s suggestion won’t work in your situation. It only takes effect if the select is not bound. In your case, you want to set the value of the backing FormControl.

4

Dear @Wingly it’s not working.

5

…taps microphone…hello, is this thing on?

6

ion-selective-hearing

7

can u please provide me type script code