mdb-select has wrong state in form

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: mdb-select has wrong state in form

nthieu13 pro asked 7 years ago

Hello,

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
 [options]="items"
 [formControl]="control"
 [(ngModel)]="model.item">
 </mdb-select>
 <div class="form-help" *ngIf="control.errors && (control.dirty || control.touched)">
 <span *ngIf="control.errors?.required">Item is required.</span>
 </div>

Noticing that 2-way data binding not working for me as well (reported in this thread https://mdbootstrap.com/support/material-select-issues-with-binding/ although you guys said it works).

Regards,

 

Damian Gemza staff answered 7 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>
</div>
</form>
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,
Damian

nthieu13 pro commented 7 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 https://github.com/angular/material2/blob/master/src/lib/select/select.ts

Damian Gemza staff commented 7 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
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
nthieu13
Pro User
10Support score
1Questions 3Answers
0Snippets likes 0Snippets