Как использовать проверку css в пользовательском интерфейсе ng-select - PullRequest
Новая
       30

Как использовать проверку css в пользовательском интерфейсе ng-select

0 голосов
/ 29 апреля 2020 

 <ng-select [items]="StateArr" bindLabel="State Name" [addTag]="false" [multiple]="false"
                        [hideSelected]="false" [placeholder]="'Select a State'" [trackByFn]="trackByFn"
                        [minTermLength]="2" typeToSearchText="Please enter 2 or more characters"
                        [(ngModel)]="HandleNgAutoComplete.State" name="State" appearance="outline"
                        (clear)="ValidateForm.state = true" (change)="RemoveValidation($event)"
                        (search)="GetState($event)" required [ngClass]="{Valid:ValidateForm.state}">
                      </ng-select>

для разработки веб-сайта мне нужен элемент управления раскрывающимся списком с богатыми возможностями и материал angular, поэтому я выбрал ng-select в качестве элемента управления раскрывающимся списком. Теперь есть сценарий, в котором мне нужно реализовать проверку CSS, чтобы раскрывающийся цвет изменялся на красный, когда элемент управления недействителен или коснулся, но значение не выбрано. Я пытался найти решение, но не помог.

Пожалуйста, кто-нибудь может подсказать мне, как выполнить проверку в ng-select на основе пользовательского интерфейса материала. Я прилагаю код, который до сих пор пытался достичь. 

.ng-select-container:after {
  border-bottom: thin solid #f44336 !important;
  content: "" !important;
  width: 100% !important;
  bottom: 0 !important;
  left: 0 !important;
  position: absolute !important;
  transition: border-color 0.3s cubic-bezier(0.55, 0, 0.55, 0.2) !important;
}
.ng-select.ng-invalid.ng-touched .ng-select-container {
    border-color: red;
  }
  /* Arrow Color */
  .ng-select.ng-invalid.ng-touched .ng-arrow-wrapper .ng-arrow {
    border-color: red transparent transparent;
  }
  /* Placeholder Color */
  .ng-select.ng-invalid.ng-touched .ng-select-container .ng-placeholder {
    color: red;
  }
  
  
  //Code 1.
...