Click here to Skip to main content
15,902,884 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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:

HTML
<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:

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

Below mat-select, I have some input fields inserted in mat-accordion:
HTML
<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>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900