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();