Topic: mdb-select-2 Multiple Problems changing FormControl values

Wanderson pro asked 1 month ago


Expected behavior When I change the value of a FormControl, the component does not remove the selection from the view.

    <div class="md-form">
      <mdb-select-2 [multiple]="true" placeholder="Choose your option" label="Example label" formControlName="selectControl">
        <mdb-select-all-option>Select all</mdb-select-all-option>
        <mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
      </mdb-select-2>
    </div>

selectControl = new FormControl(['1']);

Changed:

selectControl.setvalue(['1','2']);

Changed:

selectControl.setvalue([]); 

After the modifications nothing changes in the vision

Actual behavior

The view changes as the FormControl data changes.

Resources (screenshots, code snippets etc.)


Rafał Seifert staff commented 1 month ago

Let me clarify. You expect the component to not react to FormControl changes and not update the view?


Wanderson pro commented 1 month ago

Rafael Seifert,

What I expect is that the component reacts according to the FormControl change.

Currently the view does not change as the FormControl value changes.


Rafał Seifert staff answered 1 month ago


I have created a simple example. Here the select component reacts to manipulating FormControl inside component's class. Please try to use my example code to implement your feature.

HTML:

<form class="md-form">
  <mdb-select-2
    [multiple]="true"
    placeholder="Choose your option"
    label="Example label"
    [formControl]="selectControl"
  >
    <mdb-select-all-option>Select all</mdb-select-all-option>
    <mdb-select-option *ngFor="let option of options" [value]="option.value">{{
      option.label
    }}</mdb-select-option>
  </mdb-select-2>
</form>

TS:

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    this.selectControl.setValue(['1', '2']);
  }

  selectControl = new FormControl(['1']);
  options = [
    {
      value: '1',
      label: 'one',
    },
    {
      value: '2',
      label: 'two',
    },
    {
      value: '3',
      label: 'three',
    },
  ];
}


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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB4 15.0.0
  • Device: ALL
  • Browser: ALL
  • OS: ALL
  • Provided sample code: No
  • Provided link: No