How to make "ng-multiselect-dropdown" a required field in Anguar7? - css

Question

How can I make ng-multiselect-dropdown a required field, which must accept at least one selected item ?
<ng-multiselect-dropdown
[placeholder]="'Select countries'"
[data]="countries"
[(ngModel)]="countriesSelectedItems"
[settings]="countriesDropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
name="countries"
class="form-control">
</ng-multiselect-dropdown>

Answer 1

There was no documentation about it on npmjs.org
So, we take the approach we take to make any field as required in a template driven form in Angular.
relevant html:
<form (ngSubmit)='submission()'>
<ng-multiselect-dropdown [placeholder]="'custom placeholder'" [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings"
(onSelect)="onItemSelect($event)" (onSelectAll)="onSelectAll($event)" [required]='requiredField' [ngClass]='setClass()'
name='countrySelect'>
</ng-multiselect-dropdown>
<p *ngIf="!requiredField">
You must select a value !!
</p>
<br/>
<button type='submit'>submit</button>
</form>
relevant TS:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular 5';
dropdownList = [];
selectedItems = [];
dropdownSettings = {};
requiredField: boolean = false;
ngOnInit() {
this.dropdownList = [
{ "item_id": 1, "item_text": "India" },
{ "item_id": 2, "item_text": "Singapore" },
{ "item_id": 3, "item_text": "Australia" },
{ "item_id": 4, "item_text": "Canada" },
{ "item_id": 5, "item_text": "Pakistan" },
{ "item_id": 6, "item_text": "Japan" }
];
this.selectedItems = [
{ "item_id": 2, "item_text": "Singapore" },
{ "item_id": 3, "item_text": "Australia" }
];
this.dropdownSettings = {
singleSelection: false,
idField: 'item_id',
textField: 'item_text',
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 3,
allowSearchFilter: true
};
this.setStatus();
}
setStatus() {
(this.selectedItems.length > 0) ? this.requiredField = true : this.requiredField = false;
}
onItemSelect(item: any) {
//Do something if required
this.setClass();
}
onSelectAll(items: any) {
//Do something if required
this.setClass();
}
setClass() {
this.setStatus();
if (this.selectedItems.length > 0) { return 'validField' }
else { return 'invalidField' }
}
submission() {
if (this.requiredField == false) {
/* Print a message that not all required fields were filled... */
}
/* Do form submission... */
}
}
relevant css:
.validField { border:2px solid green; display: block; }
.invalidField { border:2px solid red; display: block; }
::ng-deep .multiselect-dropdown .dropdown-btn {width: -webkit-fill-available !important}
::ng-deep .multiselect-dropdown .dropdown-btn:focus {outline: none !important}
complete working stackblitz available here