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); 
}

在控制台日志上，如果同时选择了option1，option2或仅选择option1，则应该打印option1。

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

Lib

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

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

然后，为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>

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

2 个答案: