Topic: mdb-select multiple set value doesn't work from version 8.4.0

Manuel free asked 4 years ago


mdb-select multiple set default value doesn't work. From version 8.4.0 I can`t put values to mdb-select multi. For example:

this.searchForm.get('name').value(["1","1"]);

This doesn't work. Please check this, I can't update my app. Before of the version 8.4.0 this worked perfectly.


Arkadiusz Idzikowski staff commented 4 years ago

I already answered here: https://mdbootstrap.com/support/angular/mdb-select-doesnt-select-default-value-after-reloading-options/

Please try to update your MDB Angular version to v8.10.1 and let us know if that helped.


Manuel free commented 4 years ago

I have Angular 9 updated. It doesn't work from 8.4.0 to 9.1.0 version. I updated to all versions of mdb but It only works until mdb 8.3.1. I've tried all versions of mdb. This is only for mdb-select multiple.


Arkadiusz Idzikowski staff commented 4 years ago

We will take a closer look at this problem and fix it as soon as possible.


Manuel free commented 4 years ago

I will wait your response. Thanks.


Manuel free commented 4 years ago

Any notice over this issue? I've tried new version 9.3.0 and the problem persist.


Arkadiusz Idzikowski staff commented 4 years ago

This issue should be fixed in v9.3.1 (release is planned for next week).


Manuel free commented 4 years ago

I've tried with 9.3.1 version, the problem persists, same problem.


Arkadiusz Idzikowski staff answered 4 years ago


It should work correctly when you use patchValue or setValue methods to update your form control (as long as you have two options with the same value, which is '1' in this case). In case of any further problem please update your first post and provide full html/ts code.

this.searchForm.get('name').patchValue(["1","1"])


Manuel free commented 4 years ago

It isn't working correctly. You can to make the following check:

this.searchForm.get('behaviours').patchValue(["19", "12"]);

And after you have to make:

console.log(this.searchForm.value); or console.log(this.searchForm.get('behaviours').value);

You will see that behaviours control value is EMPTY, the searchForm isn't saving the values of this control.


Arkadiusz Idzikowski staff commented 4 years ago

Can you check with valueChanges method? The subscription should return correct value after the change in component:

this.searchForm.get('behaviours').valueChanges.subscribe(value => console.log(value));


Manuel free commented 4 years ago

this.searchForm.get('behaviours').valueChanges.subscribe(value => console.log(value));

Returns empty array. If I change control with normal click works perfectly, but If I set values to the control manually, this resets control and returns empty.


Manuel free commented 4 years ago

any news about this issue?


Arkadiusz Idzikowski staff commented 4 years ago

Please update your first post with full HTML/TS code that you use, because we couldn't reproduce such a problem on our end when we used example from the documentation.


Manuel free commented 4 years ago

The example is quiet simple. First time set control works perfectly, when I set values to control second time, the control is reset and return empty value []:

import { Component, OnInit, ViewChild, ViewContainerRef, OnDestroy, ChangeDetectionStrategy } from '@angular/core';

import { FormBuilder, FormGroup } from '@angular/forms';

@Component({ moduleId: module.id, selector: 'search', template: `

        <div class="row">
            <div class="col-12">
                <mdb-select [notFoundMsg]="'not_found_msg' | translate" [highlightFirst]="false" [allowClear]="true"
                    [multiple]="true" [enableSelectAll]="false" [filterEnabled]="true" [options]="optionsSelectBehaviours"
                    formControlName="behaviours">
                </mdb-select>
            </div>

            <div class="col-12">
                <button type="button" (click)="setValueSelect()">Set Value</button>
                <button type="button" (click)="getValueSelect()">Get Value</button>
            </div>
        </div>

    </form>`,
changeDetection: ChangeDetectionStrategy.Default,
//styleUrls: ['../../views/search/search.component.css']

})

export class SearchComponent implements OnInit, OnDestroy {

@ViewChild('f', { static: false }) private form;

public searchForm: FormGroup = null;
public optionsSelectBehaviours: Array<any> = [];

constructor(
    private readonly fb: FormBuilder,
    public viewContainerRef: ViewContainerRef,  
) {
    this.createForms();
}

ngOnInit() {

    this.optionsSelectBehaviours = [
        { value: '1', label: 'Option 1' },
        { value: '2', label: 'Option 2' },
        { value: '3', label: 'Option 3' },
    ];

}

createForms(): void 
{
    this.searchForm = this.fb.group({
        //default value, first time it works perfectly
        behaviours: ['1'],
    });

    /*this.searchForm.get('behaviours').valueChanges.subscribe((data: any) => {
        console.log("cambia", data)
    });*/

}

setValueSelect(): void 
{
    //second time, with this the control has been reset, new value is empty []
    this.searchForm.get('behaviours').patchValue(["2"]);
}

getValueSelect(): void 
{
    console.log(this.searchForm.get('behaviours').value)
}

ngOnDestroy() {

}

}


Arkadiusz Idzikowski staff commented 4 years ago

Thank you for the details, we managed to reproduce the problem on your example code. In this case, we need to add some additional fixes.



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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.1.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No