mdb-select has wrong state in form

Topic: mdb-select has wrong state in form

nthieu13 pro asked 6 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,

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

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:
<div>
<div><form [formGroup]="validatingForm"></div>
<div><mdb-select [options]="optionsSelect" [(ngModel)]="model.item"name="model"placeholder="Choose your option"formControlName="required"></mdb-select></div>
<div><label>Example label</label></div>
<div><div *ngIf="!validatingForm.controls['required'].errors?.valid && validatingForm.controls['required'].errors?.touched"></div>
<div><div *ngIf="validatingForm.controls['required'].errors?.required">Is Required</div></div>
<div></div></div>
<div></form></div>
</div>
<div></div>
<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.</div>
<div></div>
<div>Best Regards,</div>
<div>Damian</div>
<div></div>

Please insert min. 20 characters.

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:

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

Please insert min. 15 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

nthieu13

Pro User 10Support score
1Questions 3Answers 0Snippets