Angular ng select required option

Question

I cannot find out how to use the required option in ng-select.

I have tried this:

<ng-select
    #skills
    required
    [ngClass]="{ 'is-invalid': f.submitted && skills.invalid }" 
    [items]="options" 
    bindLabel="label" bindValue="value"
    [multiple]="true" placeholder="Select Skills" 
    [(ngModel)]="registerUserData.skills"                                       
    name="skills[]">
</ng-select>
<div *ngIf="f.submitted && skills.invalid" class="invalid-feedback">
    <div *ngIf="skills.errors.required">
       Skills are required
    </div>
</div>

but no luck there..

Handcraft

Answer 1

There is no build-in required attribute in ng-select. I always validate it through form validation.
In angular2 or above you can use ng-select with ngNativeValidate directive for template driven form.

<form #registerUser="ngForm" ngNativeValidate (ngSubmit)="onSubmit()">  

   <ng-select
    class="col-md-8 required"
    [items]="options" 
    bindLabel="label" 
    bindValue="value"
    [multiple]="true" 
    name="skills"
    placeholder="Select Skills" 
    [(ngModel)]="registerUserData.skills"                                       
    required>
</ng-select>
<div *ngIf="!registerUserData.skills" class="invalid-feedback">
    Skills are required
</div>

<button type='submit' [disabled]="!registerUser.valid" [isFormValid]="!registerUser.valid">Submit</button>

</form>

I am also using custom style to red mark field when untouched or touched and invalid. You can put it in global scss or css file to work as same all component.

SCSS:

ng-select.required.ng-invalid.ng-touched {
    .ng-select-container{
        border-color: #dc3545;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px #fde6e8;
    }
}
ng-select.required.ng-invalid.ng-untouched {
    .ng-select-container{
        border-color: #dc3545;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px #fde6e8;
    }
}

CSS:

ng-select.required.ng-invalid.ng-touched .ng-select-container{
 
    border-color: #dc3545;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px #fde6e8;
}
ng-select.required.ng-invalid.ng-untouched .ng-select-container {

    border-color: #dc3545;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px #fde6e8;
}

Bettinabettine

Answer 2

Also, when you do use @Majedur Rahaman's answer, remember to set the name attribute on the ng-select input.

It cost me a few hours.

Throughway

Answer 3

You have to check on the value of registerUserData.skills if it is filled than show your Skills are required else, hide it.

That is to say:

<ng-select
    #skills
    [ngClass]="{ 'is-invalid': f.submitted && skills.invalid }" 
    [items]="options" 
    bindLabel="label" bindValue="value"
    [multiple]="true" placeholder="Select Skills" 
    [(ngModel)]="registerUserData.skills"                                       
    >
</ng-select>
    <div *ngIf="f.submitted && skills.invalid && !registerUserData.skills">
       Skills are required
    </div>

NOTE:

• I do not know what f.submitted and skills.invalid are, but assuming that they're related to the submit button event.

• You can achieve a better result using ReactiveForms.

Phenolphthalein

Answer 4

I've resolved that issue like that:

In my ng-select I've used the aria-invalid attribute And in my css I used:

:host ::ng-deep ng-select[aria-invalid="true"] .ng-select-container {
  border-color: var(--vz-form-invalid-color);
}

<ng-select bindLabel="name" bindValue="id" [loading]="!docObs$" formControlName="deckOfCardsId" placeholder="Select a deck of cards..." [attr.aria-invalid]="
        submitted &&
        f['deckOfCardsId'].errors &&
        f['deckOfCardsId'].errors['required']
      " [items]="docObs$ | async">
</ng-select>

Tammietammuz