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..

Any ideas?

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;
}

Happy coding!