Make the ion-select options selected while performing CRUD Operation in Edit Mode

Question

I am performing CRUD Operations with multiple fields. I have [(ngModel)] for all the fields.

I am not interested to changed the name of the [(ngModel)] or assign any value in the register.ts or edituser.ts file while loading. Since I have made the form to save the values successfully in the register mode to the DB. I need to show the Inserted value in the Edit user Form and how can i perform that.

Note: I have several other fields namely text field, textarea, password in both the forms but somehow I have managed to save the data into DB during Registration Process and in Edit User Section also I have displayed the Values that has been Inserted in Edit Mode for all the other input types except the ion-select.

Eg: In the Register Form if the user has selected "Male" as the Option in the Edit Mode I need to stay with the user's Input right but the form shows again "Gender" instead of showing the selected value.

Below I have listed both of the forms that contain ion-select and my efforts what i have made.

register.html

<ion-item>
  <ion-label floating>Gender</ion-label>
  <ion-select [(ngModel)]="gender">
     <ion-option value="Male">Male</ion-option>
     <ion-option value="Female">Female</ion-option>
  </ion-select>
</ion-item>

Edituser.html

I have tried various options but this one alone worked. But this is not the one I am looking for. As of now [(ngModel)]="editUser.gender" is working and the value gets selected in the options tag but this is not i wanted. I need the model to be as follows [(ngModel)]="gender" but the value must be selected using any of the methods available.

<ion-item>
   <ion-label floating>Gender</ion-label>
   <ion-select [(ngModel)]="editUser.gender" name="gender">
      <ion-option value="Male">Male</ion-option>
      <ion-option value="Female">Female</ion-option>
   </ion-select>
</ion-item>

editUser contains the JSON data that comes from the DB.

Here the major drawback is that when I provide the modelname like this the value is not been fetched when the form is been submitted. So i need option to make the value selected without the change in the [(ngModel)].

My aim is to keep the Model as I have in the register.html form [(ngModel)]="gender" for both the Register and as well as the Edit Form.

Botts

Why don't you go with a FormGroup? You could put the ion-select field (or entire form) inside FormGroup then remove ngModel and use formControlName="gender". this will give you more control over the form – Ingaingaberg

Answer 1

I dont believe that there is a way to do what you are describing. However, there is a workaround to this. The Ionic Select component will emit an ion-change event,refer to the Output Events section in the API documentation. Here is the implementation.

 <ion-select [(ngModel)]="gender" (ionChange)="onSelectChange($event)">

Brandabrandais

Answer 2

on loading page, get gender from editUser object

 ionViewDidLoad(){
    this.gender = this.editUser.gender;
    }

Moguel

Answer 3

Your TypeScript component should look similiar to this:

import { Component } from '@angular/core';
// ...

@Component({
  templateUrl: 'Edituser.html'
})

export class YOURCOMPONENT {

  // ...

  constructor () {

    this.gender = this.editUser.gender;

  // ...

Jacquejacquelin