How to select multiple checkboxes using project clarity tags

Question

This is the form

<form class="clr-form clr-form-compact" (ngSubmit)="onFormSubmit()">
  <clr-checkbox-container clrInline>

    <clr-checkbox *ngFor="let item of categories"
                  [(clrChecked)]="item.running"
                  [clrDisabled]="item.disabled" [(ngModel)]="model.options" name="search">
      {{ item }}
    </clr-checkbox>
  </clr-checkbox-container>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="pull-right">
        <button type="submit" class="btn btn-primary">Search</button>
      </div>
    </div>
  </div>

</form>

This is component

categories = ['option1','option2'];

model: search = {
    options:''
};


onFormSubmit(){
    console.log(this.model); 
}

On console log it should print option1,option2 if both are selected or option1 if only option1 is selected.

Answer 1

You're using the wrong form components for checkboxes and mixing old and new forms. In 1.0+, you should be using something similar to the following. You would have an array of categories that contain a { selected: false, label: 'checkbox label' } object for each option and it will track the state of selected based on if it is checked.

<form clrForm (ngSubmit)="onFormSubmit()">
  <clr-checkbox-container clrInline>
    <clr-checkbox-wrapper *ngFor="let item of categories">
    <input type="checkbox" clrCheckbox [(ngModel)]="item.selected" name="search" value=>
      <label>{{ item.label }}</label>
    </clr-checkbox-wrapper>
  </clr-checkbox-container>
</form>