带有 ng-dirty ng-valid 的 MultiSelect

Question

我使用的是 classic select，css 风格如下

select.ng-pristine.ng-invalid {
 border-left: 5px solid $primary-600 !important;
}
select.ng-dirty.ng-valid  {
 border-left: 5px solid $valid !important;
}
select.ng-dirty.ng-invalid  {
 border-left: 5px solid $error !important;
}

现在我使用 PrimeNG multiselect，但是这个标签也有同样的问题。我不知道如何使用 ng-dirty、ng-valid、ng-pristine...。我按照下面提到的 class 但它似乎没有用

HTML

<p-multiSelect [options]="categories" formControlName="categoriesId" optionLabel="label" [filter]="false" [showToggleAll]="false"
                defaultLabel="-- Caterory --" appendTo="body"></p-multiSelect>

CSS

.ui-multiselect {
    padding:8px 15px;
    font-size: 13px;
    width:100%;
    margin:15px 0;
    border-radius:0;
    z-index: 1;
}
p-multiselect.ng-dirty.ng-valid  {
    border-left: 5px solid $valid !important;
}

如何调整包含项目的面板的大小，使其与 select 输入的大小相同？以及如何删除项目上方包含 x 的 space？

Answer 1

覆盖 ui-multiselect-panel class :

 .ui-multiselect-panel {
     right: 8px;
     left: 8px;
 }

对于十字架：

.ui-multiselect-header .ui-multiselect-close {
   top: 0.3rem !important;
 }

见Plunker

带有 ng-dirty ng-valid 的 MultiSelect

MultiSelect with ng-dirty ng-valid

multi-select

primeng

angular