CODEWITHSUNDEEP
angularionic-frameworkionic3
user3839044
user3839044

Reputation: 245

Ionic-selectable with error on multiple selection within a form

Here's what I'm trying to achieve: I'm making a simple Ionic Selectable component for a user to be able to select a value and submit it. On submission the value should be saved in Firebase database under a unique id (date and time stamp generated). I've got it working using a text value, however, on using Ionic selectable I get the following error:

Uncaught (in promise): TypeError: CreateListFromArrayLike called on non-object at e.set [as value]

There's a lot of code involved in this including the Firebase codes, but since that appears to be working I'm just posting my relevant codes. Please let me know if any additional information is needed to get around this error.

It actually works if I don't add the option of [isMultiple] within the form, however, when I add that, I get that error.

Here's my home.html file:

<ion-header>
    <ion-navbar>
        <ion-title>Ionic Selectable</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <form [formGroup]="form" margin-bottom>
    <ion-item>
      <ion-label>Diagnosis</ion-label>
      <ionic-selectable
        item-content
        formControlName="diagnosis"
        [items]="diagnoses"
        [isMultiple]="true"
        [canSearch]="true"
        (onChange)="diagnosisChange($event)">
      </ionic-selectable>
    </ion-item>
              <div margin-top padding>
                  <button margin-top round ion-button block [disabled]="!form.valid">Submit</button>
              </div>
    </form>
</ion-content>

My home.ts file:

import { Component } from '@angular/core';
import { IonicSelectableComponent } from 'ionic-selectable';
import { IonicPage, NavController, ViewController, NavParams } from 'ionic-angular';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { DiagnosisService } from '../../services';
import { Diagnosis } from '../../types';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  diagnoses: Diagnosis[];
  diagnosisControl: FormControl;
  form: FormGroup;

  constructor(
    private view: ViewController,
    private diagnosisService: DiagnosisService,
    private formBuilder: FormBuilder
  ) {
    this.diagnoses = this.diagnosisService.getDiagnoses();
    this.diagnosisControl = this.formBuilder.control(this.diagnoses[0],
      Validators.required);
    this.form = this.formBuilder.group({
      diagnosis: this.diagnosisControl
    });
  }

    diagnosisChange(event: {
    component: IonicSelectableComponent,
    value: any
  }) {
    console.log('diagnosis:', event.value);
  }

submit() {
        this.close();
    }

close() {
        this.view.dismiss();
    }
}

My diagnosis.service.ts file is as below:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { delay } from 'rxjs/operators';
import { Diagnosis } from '../types';

@Injectable()
export class DiagnosisService {
  private diagnoses: Diagnosis[] =
    ['Hypothyroidism', 'Hyperthyroidism', 'Diabetes Type 1', 'Diabetes Type 2'];

  getDiagnoses(page?: number, size?: number): Diagnosis[] {
    let diagnoses = [];

      this.diagnoses.forEach(diagnosis => {
        diagnoses.push(diagnosis);
      });

    if (page && size) {
      diagnoses = diagnoses.slice((page - 1) * size, ((page - 1) * size) + size);
    }

    return diagnoses;
  }

  getDiagnosesAsync(page?: number, size?: number, timeout = 2000): Observable<Diagnosis[]> {
    return new Observable<Diagnosis[]>(observer => {
      observer.next(this.getDiagnoses(page, size));
      observer.complete();
    }).pipe(delay(timeout));
  }
}

I've managed to create a stackblitz that recreates my issue as well. You can see that, as soon as I remove [isMultiple]="true", it works. Any help with this would be appreciated.

Upvotes: 1

Views: 3202

Answers (1)

Stephen Romero
Stephen Romero

Reputation: 3032

So I've been using this plugin and It works very well and the documentation has a lot of info on issues. One thing I noticed on your stack blitz code is in your Types directory with diagnosis.ts you dont have the element names assigned to your array. The benefit of this is to explicitly entail your values even if it's one value. You can use the ID of the values and name of your values. for example:

export class Diagnosis {
    public id: number;
    public name: string;
}

Also, I noticed on your html and ts files you seem to be using either asynchronous searching or virtual scroll but you're missing some code on your diagnosisChange() function to filter the data with your service according to the docs. I would make sure you follow the Examples. One thing I would recommend is to make sure the functionality on your ionic selectable works correctly before storing to firebase. Of course the selectable element will store as a key-value pair to your form, so make sure that is coming in correctly when the form is submitted.

Upvotes: 1

Related Questions