How to enable a ng-select to be required so that a user have to select a option

Question

I have an ng-select statement and want to ensure that an option in the drop-down list is selected before continuing if a user did not select an option a message should appear to tell the user please select an option.

I have tried the answer in the following link: Angular ng select required option

Here is the ng-select I m working with:

   <ng-select [items]="mentorSessions"
                       [multiple]="false"
                       [closeOnSelect]="true"
                       [searchable]="true"
                       bindLabel="name"
                       [ngModelOptions]="{standalone: true}"
                       [(ngModel)]="mentorToShareTo">
   </ng-select>

Paraskevas Louka · Accepted Answer · 2019-04-05T07:17:21.927

You can use FormControl. First of all you need to add your ng-select inside a form, add to your form a formGroup and to the ng-select a formControlName. Finally on form submit send form's data to the TS file:

 <form [formGroup]="myform" (ngSubmit)="onSubmit(myform)">
   <ng-select formControlName="selector" [items]="mentorSessions"
                   [multiple]="false"
                   [closeOnSelect]="true"
                   [searchable]="true"
                   bindLabel="name"
                   [ngModelOptions]="{standalone: true}"
                   [(ngModel)]="mentorToShareTo">

In the TS file do the code below to create your form builder

myform: FormGroup;

constructor(
    private formBuilder: FormBuilder
) { }


ngOnInit() {
     this.myform = this.formBuilder.group({
          selector: ['', Validators.required]
     });                                                                   
}

What I wrote above normally covers your needs. If you want to take the input of ng-select to your TS file then create an onSubmit function as below:

onSubmit(data) {
  //do whatever you want with input data
}

For further information please reply to me. =)

Import in your app module:

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

In your component.ts

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FormControl } from '@angular/forms';

Thank you for getting back to me. When I add the formControlName="selector" to my ng-select my whole page is turning blank. What could be causing this? — Andrea Cloete CLOETE, Apr 05 '19 at 07:07
I hope you added all the needed code that I mention above. Also look at the edited post for the needed libraries. This is maybe what causes the problem — Paraskevas Louka, Apr 05 '19 at 07:13

score 0 · Answer 2 · answered Jul 26 '20 at 07:50

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

Hope it's helpful!

How to enable a ng-select to be required so that a user have to select a option

2 Answers2