angular - Ionic Select Option doesn' retrieve the value of option through ng-for

Question

im building this app in IONIC trying to establish a dropdown selector using the IONIC GUI, but for some reason de value isnt retrieved. I fetch a array of objects that would be looped in order to access its value :

allProdSubtypes=
[
 {listOfImages: Array(2), id: 1, productSubType: "Roller Blades"},
 {listOfImages: Array(2), id: 2, productSubType: "Traditional Skates"},
 {listOfImages: Array(2), id: 3, productSubType: "Mountain Bike"},
 {listOfImages: Array(2), id: 4, productSubType: "City Bike"}
 {listOfImages: Array(0), id: 5, productSubType: "Not Classified"},
]

The HTML tag in IONIC would be like :

       <form [formGroup]="createImgForm" (ngSubmit)="createimage($event)">
           <ion-item class="form-group col-md-12 mx-auto">
           
            <input type="file" class="form-control" placeholder="Select image" formControlName="url" #imageUpload
              (change)="selectImg($event) " accept='image/**'>
          </ion-item>

          <ion-item>
            <ion-label>Select Product Sub Type</ion-label>
            <ion-select placeholder="Select Product Sub Type" *ngIf="allProdSubtypes">
              <ion-select-option  *ngFor="let option of allProdSubtypes" formControlName="productSubTypeId" ngDefaultControl   [value]="option.id">{{option.productSubType}}</ion-select-option>
            </ion-select>
          </ion-item>

          
          <ion-button color="apppersonalized" size="large" type="submit" expand="block">
            <h3 style="color:white">create</h3>
          </ion-button>
        </form>

But then when i call the mtehod that triggers the creation in order to see what brings that form , the value referring to the bound value[value] is null:

createimage(event) {
   
    const {url, productSubTypeId}= this.createImgForm.value;
    console.log(this.createImgForm.value);

    
  }

Thus i don't know what else to do. I have tried to use [ngValue], but the IONIC doesn't accept it .

I'm using reactive forms to retrieve value for this html thus :

import { ModalController } from "@ionic/angular";
import { HttpsService } from "./../../services/https.service";
import { Validators } from "@angular/forms";
import { FormBuilder } from "@angular/forms";
import { FormGroup, FormControl } from "@angular/forms"; //imports
import { Component, OnInit } from "@angular/core";
import { Store } from "@ngrx/store";
import { GlobalAppState } from "src/app/globalReducer.reducer";
import { AllProductsSubType } from "src/app/interfaces/interfaces.interface";

@Component({
  selector: "app-create-image-modal",
  templateUrl: "./create-image-modal.component.html",
  styleUrls: ["./create-image-modal.component.scss"],
})
export class CreateImageModalComponent implements OnInit {
  createImgForm: FormGroup;
  defaultImage: string = "/assets/defaultUser.png";
  allProdSubtypes: any;
  constructor(
    private formBuilder: FormBuilder,
    private httpService: HttpsService,
    private mdlCtrl: ModalController,
    private stateStore: Store<GlobalAppState>
  ) {}

  ngOnInit() {
    this.createImgForm = this.formBuilder.group({
      url: ["", Validators.required],
      productSubTypeId: [null, Validators.required],
    });
 }
}

question from:https://stackoverflow.com/questions/65893080/ionic-select-option-doesn-retrieve-the-value-of-option-through-ng-for

Answer 1

i guess you should move your formControlName to the ion-select, cause is the one retrieveing the information from the option to be displayed on the form builder. Good Luck