Multiple selection with form set default value

@costaeder wrote:

Hi,

I have a list of pets for multi-selection. But in edit mode of form the elements is not coming selected, and then the form shows invalid.

My form:

this.eventForm = fb.group({
...
 'pets': [this.event.pets.map(x => x.id), Validators.compose([Validators.required])],
...
});

ionViewDidLoad() {
 this.petBackend.getAll().subscribe(pets => {
      this.pets = [];
      for (let p of pets) {
        let petSelected = this.event.pets.filter(a => a.id == p.id).length > 0;
        this.pets.push({ pet: p, checked: petSelected });
      }
    });
}

My html:

 <ion-select formControlName="pets" multiple="true">
                                <ion-option *ngFor="let pet of pets" [value]="pet.pet.id" [selected]="pet.checked">{{pet.pet.name}}</ion-option>
                            </ion-select>

I tried using the pet object as a value and others ways. If I set [select]=“true”, all objects comes selected.

My dependencies:

 "dependencies": {
        "@agm/core": "^1.0.0-beta.2",
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/call-number": "^4.5.2",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/geolocation": "^4.5.3",
        "@ionic-native/launch-navigator": "^4.5.2",
        "@ionic-native/onesignal": "^4.5.3",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/storage": "2.0.1",
        "call-number": "^1.0.1",
        "cordova-android": "7.0.0",
        "cordova-plugin-actionsheet": "^2.3.3",
        "cordova-plugin-compat": "^1.2.0",
        "cordova-plugin-console": "^1.1.0",
        "cordova-plugin-device": "^1.1.7",
        "cordova-plugin-dialogs": "^2.0.1",
        "cordova-plugin-geolocation": "^2.4.3",
        "cordova-plugin-splashscreen": "^4.1.0",
        "cordova-plugin-statusbar": "^2.4.1",
        "cordova-plugin-whitelist": "^1.3.3",
        "intl": "^1.2.5",
        "ionic-angular": "3.6.1",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionic2-calendar": "^0.3.13-weekdayview-tpls",
        "ionicons": "3.0.0",
        "lodash": "^4.17.4",
        "moment": "^2.20.1",
        "onesignal-cordova-plugin": "^2.3.1",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "uk.co.workingedge.phonegap.plugin.launchnavigator": "^4.1.3",
        "zone.js": "0.8.12",
        "mx.ferreyra.callnumber": "~0.0.2"
    },
    "devDependencies": {
        "@ionic/app-scripts": "^2.1.3",
        "awesome-typescript-loader": "^3.2.3",
        "ionic": "3.19.1",
        "typescript": "2.3.4"
    },

Tank you!

Posts: 1

Participants: 1

Read full topic