Topic: mdb-select has wrong state in form

nthieu13 pro asked 6 years ago


I am using mdb-select within a reactive form. When I open the form, mdb-select form control has dirty = true which results in validation message showing up even if I haven't input anything yet. The control should be pristine until user changes it value. Here is how I use

<mdb-select #mdbSelect
 <div class="form-help" *ngIf="control.errors && (control.dirty || control.touched)">
 <span *ngIf="control.errors?.required">Item is required.</span>

Noticing that 2-way data binding not working for me as well (reported in this thread although you guys said it works).



Damian Gemza staff answered 6 years ago

Hello nthieu13, You have forgotten about "name" attribute on your <mdb-select>. Please, note that, ngModel won't work without name attribute on input. For me everything is working fine. Here's my HTML code:
<form [formGroup]="validatingForm">
<mdb-select [options]="optionsSelect" [(ngModel)]="model.item"name="model"placeholder="Choose your option"formControlName="required"></mdb-select>
<label>Example label</label>
<div *ngIf="!validatingForm.controls['required'].errors?.valid && validatingForm.controls['required'].errors?.touched">
<div *ngIf="validatingForm.controls['required'].errors?.required">Is Required</div>
This validators markup won't show any error message, until you click on select. If validatingForm.controls is not valid (required field isn't filled) and if validatingForm is touched, then show errors message.
Best Regards,

nthieu13 pro commented 6 years ago

Still the same with `formControlName`. You can use either `formControl` or `formControlName`. The former binds to a public FormControl in component.ts, the latter bind to the name of control in FormGroup. I think this issue related to 2-way binding for async data. I managed to fix the issue of 2-way binding by changing your code in select.component.ts. // your code if (changes.hasOwnProperty('options')) { this.updateOptionsList(changes['options'].isFirstChange()); } // my code if (changes.hasOwnProperty('options')) { const firstTime = changes['options'].isFirstChange() || !changes['options'].previousValue; this.updateOptionsList(firstTime); } There are actually 2 changes since the control created and get values binding. Unfortunately, this fix does not make the form state works as I expected. I think this component should be rewritten. It should use ChangeDetectionStrategy.OnPush to avoid unexpected changes, manage its own states, the label should float when having focused and so on. The select from angular material is much better

Damian Gemza staff commented 6 years ago

Thanks for your suggestion. We will take a look at this, and think, how we can upgrade our material select. Best Regards, Damian

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No