CODEWITHSUNDEEP
angularangular6vmware-clarity
user1298426
user1298426

Reputation: 3717

How to select multiple checkboxes using project clarity tags

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.

Upvotes: 0

Views: 2057

Answers (2)

Oscar Del Rio
Oscar Del Rio

Reputation: 11

I installed this library https://github.com/ng-select/ng-select

Lib

When you install the library add this line of CSS code to your styles.css

@import "~@ng-select/ng-select/themes/material.theme.css";

Then, to give the Clarity Project design to this select copy and paste this code CSS to style.css

.label-clarity {
        color: #454545;
        font-size: .541667rem;
        font-weight: 600;
        line-height: .75rem;
    }
    
    .ng-select {
        padding: 0;
    }
    
    .ng-select .ng-select-container .ng-value-containe {
        padding: 0;
        border-top: unset !important;
    }
    
    .ng-select .ng-select-container {
        min-height: 29px !important;
    }
    
    .clr-select-container {
        margin-right: 35px;
        margin-top: 0px !important;
    }
    
    .ng-select .ng-select-container{
        width: 162px !important;
    }
    
    .ng-select.ng-select-focused .ng-select-container:after {
        border-color: #0077b8;
    }
    
    .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{
        background-color: #0077b8;
        border-radius: 40px;
        padding: 0px 10px;
    }
    
    .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{
        font-size: 12px;
    }
    
    .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-value-container {
        border-top-width: 0px !important;
    }
    
    .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected {
        color: #0092d1;
        background-color: rgba(57, 131, 167, 0.13) !important;
    }
    
    .ng-select.ng-select-single .ng-select-container .ng-value-container{
        border-top-width: 0px !important;
    }
    
    .ng-select.ng-select-multiple .ng-select-container .ng-value-container{
        border-top-width: 0px !important;
    }

... and finally to place it in HTML use this:

<div class="clr-select-container">
   <label class="label-clarity">Seleccione Site</label>
   <ng-select appendTo="body" [items]="accesorios" bindLabel="name" bindValue="id" [searchable]="false" [multiple]="true"></ng-select>
</div>

Upvotes: 1

Jeremy Wilken
Jeremy Wilken

Reputation: 6976

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>

Upvotes: 1

Related Questions