如何使用项目清晰度标签 select 多个复选框

Question

这是表格

<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>

这是组件

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

model: search = {
    options:''
};


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

在控制台日志上它应该打印选项 1、选项 2（如果两者都被选中）或者选项 1（如果只选择选项 1）。

Answer 1

您为复选框使用了错误的表单组件，并且混用了新旧表单。在 1.0+ 中，您应该使用类似于以下内容的内容。您将拥有一个类别数组，其中包含每个选项的 { selected: false, label: 'checkbox label' } 对象，它将根据是否选中来跟踪所选状态。

<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>

Answer 2

我安装了这个库https://github.com/ng-select/ng-select

安装库时，将这行 CSS 代码添加到 styles.css

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

然后，为这个 select 提供 Clarity Project 设计，将此代码 CSS 复制并粘贴到 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;
    }

... 最后将它放在 HTML 中使用：

<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>

如何使用项目清晰度标签 select 多个复选框

How to select multiple checkboxes using project clarity tags

angular

vmware-clarity

angular6