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>