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

2
  • 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 Commented Jun 17, 2022 at 20:01
  • I’m also not seeing an ng-container here as mentioned in your question title btw..? Commented Jun 17, 2022 at 20:02

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.