Select the ion selection options selected when performing the CRUD operation in edit mode

Question

I am doing CRUD operations with multiple fields. I have [(ngModel)] for all fields.

I am not interested in changing the name [(ngModel)] or assigning any value in the register.ts or edituser.ts at boot time. Since I made a form to save the values ​​successfully in the registration mode in the database. I need to show the Inserted value in the Edit User Form and how I can accomplish this.

Note. I have several other fields: a text field, a text field, a password in both forms, but somehow I managed to save the data in the database during the registration process and in the "Edit user" section, also I have displayed the values ​​that were added in edit mode for all other input types except ion-select .

For example: In the registration form, if the user selected “Male” as an option in the editing mode, I need to stay with the user input right, but “Sex” is displayed again in the form instead of showing the selected value.

Below I have listed both forms containing ion-select , and my efforts that 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 tried different options, but only one. But this is not the one I'm looking for. At the moment, [(ngModel)]="editUser.gender" works, and the value is selected in the parameter tag, but I do not need this. I need a model as follows [(ngModel)]="gender" , but the value must be selected using any of the available methods.

 <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 JSON data that comes from the database.

The main drawback here is that when I provide such a model name, this value is not retrieved when the form is submitted. Therefore, I need the value to be selected without changing in [(ngModel)] .

My goal is to save the model as I am in the form register.html [(ngModel)] = "gender" for both the Registration and the Edit Form.

Answer 1

I do not believe that there is a way to do what you describe. However, there is a workaround to this. The Ionic Select component will emit an ion change event, see Section

Answer 2

on the download page, get gender from the editUser object

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

Answer 3

Your TypeScript component should look something like this:

 import { Component } from '@angular/core'; // ... @Component({ templateUrl: 'Edituser.html' }) export class YOURCOMPONENT { // ... constructor () { this.gender = this.editUser.gender; // ...