ionic 2 ion-select not sending value to formbuilde

Question

I'm using formbuilder in ionic 2 but facing problems with the ion-select directive when using formControlName with it. All the data is being forwarded to firebase where these values are being set.

here's an extract from the html

<ion-item fromGroupName="carDetails">
          <ion-label floating>car make</ion-label>
          <ion-select #carMake (change)="elementChanged(carMake)" formControlName="carMake">
            <ion-option value="ford" selected>Ford</ion-option>
            <ion-option value="bmw">BMW</ion-option>
            <ion-option value="mercedes">Mercedes</ion-option>
          </ion-select>
        </ion-item>

<ion-item formGroupName="carDetails">
          <ion-label floating>car model</ion-label>
          <ion-input #carModel formControlName="carModel" type="text" (change)="elementChanged(carModel)"
          [class.invalid]="!slideTwoForm.controls.carDetails.controls.carModel.valid && (carModelChanged || submitAttempt)"></ion-input>
        </ion-item>
        <ion-item *ngIf="!slideTwoForm.controls.carDetails.controls.carModel.valid  && (carModelChanged || submitAttempt)">
          <p>Please enter a valid car model.</p>
        </ion-item>

<ion-item formGroupName="carDetails">
          <ion-label floating>car year</ion-label>
          <ion-datetime #carYear formControlName="carYear" displayFormat="YYYY" (change)="elementChanged(carYear)" ngControl="carYear"></ion-datetime>
        </ion-item>

and here's an extract from the .ts file

this.slideTwoForm = formBuilder.group({
    ssn: ['', Validators.compose([Validators.maxLength(11), Validators.pattern('[0-9]*'), Validators.required])],
    drivingCredentials: this.formBuilder.group({
      drivingLicense: [''],
      expirationDate: [''],
    }),
    carDetails: this.formBuilder.group({
      carMake: [''],
      carModel: [''],
      carYear: [''],
      carColor: [''],
    }),
    password: ['', Validators.compose([Validators.minLength(6), Validators.required])]
  });

Now, the "carModel" and "carYear" are working flawlessly and sending their value when using "formControlName", but "carMake" is giving an error when using "formControlName", the error:

polyfills.js:3 Uncaught ViewWrappedError {_nativeError: Error: Error in ./SignUpPage class SignUpPage - inline template:134:70 caused by: Cannot find contro…, originalError: Error: Cannot find control with name: 'carMake'
at _throwError (http://localhost:8100/build/main…, context: DebugContext}

I tried using ngControl instead of formControlName but the values are empty.

did anyone else faced problems like this when sing ion-select in ionic 2 formbuilder?

Answer 1

I finally solved the issue i was having between "ion-select" and "formControlName", thanks to http://www.joshmorony.com/advanced-forms-validation-in-ionic-2/

I saw that the html is a bit different for ion-select, the old html which was causing problems:

<ion-item fromGroupName="carDetails">
      <ion-label floating>car make</ion-label>
      <ion-select #carMake (change)="elementChanged(carMake)" formControlName="carMake">
        <ion-option value="ford" selected>Ford</ion-option>
        <ion-option value="bmw">BMW</ion-option>
        <ion-option value="mercedes">Mercedes</ion-option>
      </ion-select>
    </ion-item>

The new html for ion-select:

<ion-item formGroupName="carDetails">
            <ion-label floating>car make</ion-label>
            <ion-select [class.invalid]="!slideTwoForm.controls.carDetails.controls.carMake.valid
            && (slideTwoForm.controls.carDetails.controls.carMake.dirty || submitAttempt)" formControlName="carMake">
            <ion-option  value="ford" selected>Ford</ion-option>
            <ion-option  value="bmw">BMW</ion-option>
            <ion-option  value="mercedes">Mercedes</ion-option>
          </ion-select>
        </ion-item>

Now I'm not getting any errors, the selected value is being passed to the database and its working perfectly. Once again thanks to http://www.joshmorony.com/advanced-forms-validation-in-ionic-2/ for updating his article