0

I am trying to mimic the behavior of mat-form-field for required validation on ng-select In order to mimic the behaviour I need to add border and color as red when mat-error trigeered.

Here is my HTML

 <form (fromgroup)="form">
  <div id="div1">
    <ng-select
    formcontrolName="gender"
    [(ng-model)]=names
    required
    >
    <ng-template let-items="$items">
    <input
     type=checkbox
    select All
    />
    </ng-template>
    </ng-select>
    <mat-error class="ng-select-error ng-select-required" 
    *ngif="!form.controls["gender"].valid&& form.controls["gender"].touched"
    >
    
    </mat-error>
   </div>
 </form>

What Ia m trying to do is when he user touches the ng-select and did not select any item for checkbox,we should highlight the ng-select drodown with red color

I tried with the css but it snot highlighting the ng-select

scss:

.ng-select-required{
    #div1 .ng-select-container {border-bottom: solid 1px red }
    #div1 .ng-placeholder {color:red}
    #div1 .ng-arrow {color:red}
    }
 .ng-select-error{
font-size:12px

}

I am trying to do the with the above css but it is not highlighting the ng-container and ng-select . Please let me know why css is not working or anything I am doing wrong

AMDI
  • 895
  • 2
  • 17
  • 40
  • Your selectors seem off. I would expect to see the #div1 first (and only once.. because id..?) hard to tell without seeing the actual generated html – MikeOne Jun 17 '22 at 20:01
  • I’m also not seeing an ng-container here as mentioned in your question title btw..? – MikeOne Jun 17 '22 at 20:02

0 Answers0