mdb-select-2 reset select to placeholder value


Topic: mdb-select-2 reset select to placeholder value

Studyly pro premium priority asked 4 years ago

I have the following form:

 <form [formGroup]="detailsForm">
     <div class="mb-2">
         <label for="country2" class="mdb-input-margin">Land *</label>
             <mdb-select-2 (valueChange)="filterSchooltypes($event)" placeholder="Land auswählen" id="country2"
                [formControlName]="'country'">
                <mdb-select-option *ngFor="let region of regionInfos"
                       [value]="region.country.countryName">{{ region.country.countryName }}</mdb-select-option>
             </mdb-select-2>
    </div>

    <div class="mb-2">
        <label for="school2" class="mdb-input-margin">Schultyp *</label>
            <mdb-select-2 (valueChange)="filter2($event)" [disabled]="detailsForm.get('country').invalid"
                placeholder="Schultyp auswählen" id="school2"
                [formControlName]="'schoolTypeValue'">
               <mdb-select-option *ngFor="let type of schoolTypes" [value]="type">{{ type }}</mdb-select-option>
            </mdb-select-2>
    </div>
 </form>

Expected behavior

Whenever user selects a country from the first mdb-select-2, (valueChanges) event fires and filterSchooltypes() function is called, which resets the formControl value "schoolTypeValue". So I expect the second mdb-select to reset accordingly (preferably showing the placeholder value again).

I need to reset the value, because filterSchooltypes() filters and changes the list of schoolTypes, making the user have to repick from the second mdb-select-2

Actual behavior

The second mdb-select-2 does not reset even though the formcontrol value "schoolTypeValue" is reset using group.controls.schoolTypeValue.reset();


Arkadiusz Idzikowski staff answered 4 years ago

We will fix that in the next release (withing two weeks).


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: Yes
  • Technology: MDB Angular
  • MDB Version: 9.0.0
  • Device: Desktop
  • Browser: Firefox
  • OS: MacOs/Windows
  • Provided sample code: No
  • Provided link: No