Best approach to deal with <ion-checkbox> when submit a form?


#1

I have a working form using <ion-select> and <ion-options> like this:

<form #objectForm="ngForm" novalidate>
  <ion-item>
    <ion-label stacked>Object</ion-label>
    <ion-input [(ngModel)]="object.name" ngControl="name" #name="ngForm" required placeholder="What's the name of the object"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label stacked>Room</ion-label>
    <ion-select [(ngModel)]="object.room" ngControl="room" #room="ngForm" required>
      <ion-option *ngFor="let room of rooms" value="{{room.id}}">{{room.name}}</ion-option>
    </ion-select>
  </ion-item>
  <button (click)="saveObject(objectForm)" type="submit" block>Save</button>
</form>

In my component I have a function saveObject with the simple purpose of get the form.value and send to the API, but we changed the specs and now we can add one Object, like bed, chair, table and so in multiple rooms, instead of <ion-select> now I need to use checkboxes.

I tried to use like this:

<ion-item *ngFor="let room of rooms">
  <ion-label>{{room.name}}</ion-label>
  <ion-checkbox dark value="room.id"></ion-checkbox>
</ion-item>

But when I try console.log(form.value) I can’t see the checked values. Any ideas? :slight_smile:


#2

You could either directly bind [(ngModel)] on each checkbox or use form directives such as formControl or formControlName.


#3

I tried the [(ngModel)] approach with this code:

<ion-item *ngFor="let room of rooms">
  <ion-label>{{room.address_room.name}} {{room.address_room.id}}</ion-label>
  <ion-checkbox dark [(ngModel)]="{{room.id}}"></ion-checkbox>
</ion-item>

But I got an error trying to bind the room id into the [(ngModel)]:

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{room.id}}] in AddObjectModal@47:29 ("-label>{{room.name}} {{room.id}}</ion-label>
          <ion-checkbox dark [ERROR ->][(ngModel)]="{{room.id}}"></ion-checkbox>
        </ion-item>
      </ion-list>
"): AddObjectModal@47:29
Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{room.id}}=$event] in AddObjectModal@47:29 ("-label>{{room.name}} {{room.id}}</ion-label>
          <ion-checkbox dark [ERROR ->][(ngModel)]="{{room.id}}"></ion-checkbox>
        </ion-item>
      </ion-list>
"): AddObjectModal@47:29

#4

Curly-brace interpolation means “render this as a string”. You don’t want it here, as the error message says. Try [(ngModel)]="room.id" instead.


#5

I tried without the curly-braces, using this approach now all checkboxes are checked by default and even with [(ngModel)] I can’t see the values when I do console.log(form.value).

Another thing I noticed is that <ion-checkbox> doesn’t create a <input type="checkbox">, I’m kind of lost on how to get those values.
Thanks for your help.


#6

You might be able to work around this by manually watching the changes event. Sorry, I don’t have a working forms application at the moment because I’m banging my head against this issue.


#7

can you provide the code for the controller? it is kinda hard to see what you are trying to accomplish here