Setting field values dynamically from rest api

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:


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

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

          <div [ngClass]="{'has-error': (addfamily_form.controls.Relation.errors && addfamily_form.controls.Relation.dirty), 'has-success': !addfamily_form.controls.Relation.errors}">
              <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>
          <p *ngIf="addfamily_form.controls.Relation.errors?.required && addfamily_form.controls.Relation.dirty ">This field is required</p>

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-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">
          <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.

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

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

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

Hope this helps a bit

@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.

Dear @Wingly it’s not working.

…taps microphone…hello, is this thing on?


can u please provide me type script code