CODEWITHSUNDEEP
angularangular-ngselectangular2-form-validation
Iraklis
Iraklis

Reputation: 228

Angular ng select required option

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

Upvotes: 6

Views: 27591

Answers (4)

Saul Rincon
Saul Rincon

Reputation: 1

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>

Upvotes: 0

Majedur
Majedur

Reputation: 3242

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

Upvotes: 5

Ata
Ata

Reputation: 31

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.

Upvotes: 1

SeleM
SeleM

Reputation: 9678

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.

Upvotes: 0

Related Questions