How to enable input fields depending on mat-select options?

See more:

HTML

SelectedValue

material

What I want to do is to enable the inputs associated with the option selected from mat-select. If the option is deselected, the input fields should be disabled. It works but not completely OK. On init, all input fields are disabled.

If I select the mat-select's options in this order: SQLite, Microsoft SQL Server, MySQL; the input fields are enabled in the same order as options have been selected.

If mat-select's options are selected in order: Microsoft SQL Server, MySQL; first are enabled the inputs associated with SQLite and when the MySQL is selected, the Microsoft SQL Server's fields are enabled.

If I select only the third option (MySQL), SQLite's input fields are enabled and not MySQL's input fields as it should be working. What am I doing wrong?

What I have tried:

Inside a mat-tab I have a form which contains a mat-select with the following code:

<mat-form-field class="example-full-width">
    <mat-label>Database</mat-label>
         <mat-select [formControl]="types" multiple>
                   <mat-select-trigger>
                        {{(types?.value ||[''])[0]}}
                          <span *ngIf="(types.value?.length || 0) > 1" class="example-additional-selection">
                                       (+{{(types.value?.length || 0) - 1}} {{types.value?.length === 2 ? 'other' :
                                       'others'}})
                          </span>
                     </mat-select-trigger>
               <mat-option *ngFor="let type of typeList" [value]="type">{{type}}</mat-option>
          </mat-select>
     <mat-icon matSuffix>storage</mat-icon>
  </mat-form-field>

The options available in mat-select on typescript are:

types = new FormControl('');
typeList: string[] = ['SQLite', 'Microsoft SQL Server', 'MySQL'];

Below mat-select, I have some input fields inserted in mat-accordion:

<mat-accordion>
                       <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
                           <mat-expansion-panel-header>
                               <mat-panel-title> SQLite Database </mat-panel-title>
                           </mat-expansion-panel-header>
                           <mat-form-field class="example-full-width" appearance="fill">
                               <mat-label>Database Name</mat-label>
                               <input [disabled]="!types.value[0]" id="numeDB_SQLite" type="text" matInput
                                   placeholder="Ex: Lite_DB" name="numeDB_SQLite" ngModel required=""
                                   oninvalid="this.setCustomValidity('Please enter DB name')"
                                   oninput="setCustomValidity('')">
                           </mat-form-field>
                           <mat-form-field class="example-full-width" appearance="fill">
                               <mat-label>Database string Connection</mat-label>
                               <input [disabled]="!types.value[0]" id="stringConnDB_SQLite" type="text" matInput
                                   placeholder="Ex: " name="stringConnDB_SQLite" ngModel required=""
                                   oninvalid="this.setCustomValidity('Please enter DB connection string')"
                                   oninput="setCustomValidity('')">
                           </mat-form-field>
                       </mat-expansion-panel>
                   </mat-accordion>
                   <br />
                   <mat-accordion>
                       <mat-expansion-panel (opened)="panelOpenState2 = true" (closed)="panelOpenState2 = false">
                           <mat-expansion-panel-header>
                               <mat-panel-title> Microsoft SQL Server Database </mat-panel-title>
                           </mat-expansion-panel-header>
                           <mat-form-field class="example-full-width" appearance="fill">
                               <mat-label>Database Name</mat-label>
                               <input [disabled]="!types.value[1]" id="numeDB_MSSQL" type="text" matInput
                                   placeholder="Ex: MSSQL_DB" name="numeDB_MSSQL" ngModel required=""
                                   oninvalid="this.setCustomValidity('Please enter DB name')"
                                   oninput="setCustomValidity('')">
                           </mat-form-field>
                           <mat-form-field class="example-full-width" appearance="fill">
                               <mat-label>Database string Connection</mat-label>
                               <input [disabled]="!types.value[1]" id="stringConnDB_MSSQL" type="text" matInput
                                   placeholder="Ex: " name="stringConnDB_MSSQL" ngModel required=""
                                   oninvalid="this.setCustomValidity('Please enter DB connection string')"
                                   oninput="setCustomValidity('')">
                           </mat-form-field>
                       </mat-expansion-panel>
                   </mat-accordion>
                   <br />
                   <mat-accordion>
                       <mat-expansion-panel (opened)="panelOpenState1 = true" (closed)="panelOpenState1 = false">
                           <mat-expansion-panel-header>
                               <mat-panel-title> Microsoft SQL Server Database </mat-panel-title>
                           </mat-expansion-panel-header>
                           <mat-form-field class="example-full-width" appearance="fill">
                               <mat-label>Database Name</mat-label>
                               <input [disabled]="!types.value[2]" id="numeDB_MySQL" type="text" matInput
                                   placeholder="Ex: MySQL_DB" name="numeDB_MySQL" ngModel required=""
                                   oninvalid="this.setCustomValidity('Please enter DB name')"
                                   oninput="setCustomValidity('')">
                           </mat-form-field>
                           <mat-form-field class="example-full-width" appearance="fill">
                               <mat-label>Database string Connection</mat-label>
                               <input [disabled]="!types.value[2]" id="stringConnDB_MySQL" type="text" matInput
                                   placeholder="Ex: " name="stringConnDB_MySQL" ngModel required=""
                                   oninvalid="this.setCustomValidity('Please enter DB connection string')"
                                   oninput="setCustomValidity('')">
                           </mat-form-field>
                       </mat-expansion-panel>
                   </mat-accordion>