How to add validation to ngbDropdownMenu in Angular? - html

Question

I have a form with couple of dropdowns which looks like this:
<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
<button type="button" class="btn btn-outline-primary w-100 dropdown-toggle" id="operatorDropdown"
ngbDropdownToggle>{{operator.name ? operator.name : 'Select your operator' | translate}}</button>
<div ngbDropdownMenu aria-labelledby="dropdownExample" class="w-100 mb-3" #dropdownmenu >
<button type="button" *ngFor="let option of operators" class="dropdown-item" (click)="operator = option"
[ngClass]="{'active':operator.name === option.name}">{{option.name}}</button>
</div>
</form>
I'm having a tough time adding a simple validation to this dropdown. I want to display an error if no option is selected after pressing Submit button. Tried various validation examples on angular but none of them seems working with this kind of dropdown(without <input> etc.)
Also tried something like this, but I believe it is far from working properly.
<div *ngIf="f.controls.operatorDropdown?.errors">Error message goes here. </div>

Answer 1

I've managed to create the solution myself. I made that before submitting, my component would check if the operator.name is undefined(not selected). If it was, it would unhide the error message, if not it would just proceed and submit the form.
Also added the validation to (click) button event, so after the error is shown if the user chooses the operator it would validate that the operator.name is not undefined anymore and would hide the error message.
I'll share my final version, feel free to comment.
component.html
<form name="form" #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
<div ngbDropdown [className]="!isOperatorEmpty ? 'u-mw-300p u-mw-xs-100' : 'u-mw-300p u-mw-xs-100 is-invalid'">
<button type="button" class="btn btn-outline-primary w-100 dropdown-toggle" id="operatorDropdown"
ngbDropdownToggle>{{operator.name ? operator.name : 'Select your operator' | translate}}</button>
<div ngbDropdownMenu aria-labelledby="dropdownExample" class="w-100 mb-3">
<button type="button" *ngFor="let option of operators" class="dropdown-item" (click)="operator = option;validateOperatorDropdown()"
[ngClass]="{'active':operator.name === option.name}">{{option.name}}</button>
</div>
</div>
<div class="invalid-feedback u-mw-300p u-mw-xs-100" [hidden]="!isOperatorEmpty">{{"Please select operator." | translate}}</div>
</form>
component.ts
validateOperatorDropdown() {
if (this.operator.name === undefined) {
this.isOperatorEmpty = true;
} else {
this.isOperatorEmpty = false;
}
}
onSubmit(f: FormsModule) {
this.validateOperatorDropdown()
if (!this.isOperatorEmpty) {
//continue
}
}