Implementing validations in Angular 2 multi-select drop-down

Question

I was wondering bootstrap validations can be implemented in Angular 2 multi-select dropdown by cuppa labs. I went through the documentation but was unable to find any. Basically I want to highlight the dropdown in red if user does not select any values like for a normal input I can use [ngClass]="{'is-invalid': someThing.invalid}". Here is my HTML and what I have tried:

<angular2-multiselect name="countries"
  [(ngModel)]="myModel.countries" #countries2="ngModel"
  presentInCountries [data]="countries"
  [settings]="presentInCountriesdropdownSettings"
  (ngModelChange)="multiselectChangeCountries($event)">
</angular2-multiselect>

I tried setting a boolean to true if selected countries is 0 and then apply:

this.presentInCountriesdropdownSettings.classes += ' is-invalid';

But this does not work. Is there any way to implement this?

ng-hobby ng-hobby · Accepted Answer · 2020-08-31T20:10:50

Try using ReactiveForm and Required validator like this:

Component.ts

import { Component } from '@angular/core';
import { FormBuilder, Validators } from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private fb: FormBuilder) { }

  /*########### Form ###########*/
  registrationForm = this.fb.group({
    countryName: ['', [Validators.required]]
  })

Component.html

<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
  <angular2-multiselect name="countries"
     formControlName="countryName"
     presentInCountries [data]="countries"
     [settings]="presentInCountriesdropdownSettings"
     (ngModelChange)="multiselectChangeCountries($event)">
  </angular2-multiselect>
</form>

Implementing validations in Angular 2 multi-select drop-down

1 Answers