I'm currently working on a unique form element that combines checkboxes and radio buttons to create a multi-level selection feature.
For instance, you can use it to configure properties for a car where a radio option (Digital or FM) is dependent on the selection of another option (Radio):
- [v] Stero
- [v] Radio
- ---(o) Digital
- ---( ) FM
- [ ] Child seats
- [ ] Rear camera
The radio buttons should only be visible when the corresponding "parent" checkbox is selected, like in the case of the Radio option.
<mat-form-field>
<mat-select [(value)]="viewValue" #multipleSelect (openedChange)="onMultipleChange($event, multipleSelect.selected)" multiple>
<ng-container *ngFor="let property of carProperties">
<!-- Display the property if it has no subProperties, otherwise show nested options -->
<mat-option *ngIf="!property.subProperties; else nestedOption" [value]="property.value">
{{property.value}}
</mat-option>
<ng-template #nestedOption>
<mat-checkbox #parentOption>
{{property.value}}
</mat-checkbox>
<ng-container *ngIf="parentOption.checked">
<ng-template #radioOptions>
<mat-radio-group (change)="radioChange($event)"> <!-- Not sure what the ngModel should be here -->
<mat-radio-button *ngFor="let subProperty of property.subProperties" [value]="subProperty.value">
{{subProperty.value}}
</mat-radio-button>
</mat-radio-group>
</ng-template>
</ng-container>
</ng-template>
</ng-container>
</mat-select>
</mat-form-field>
I have managed to develop a solution but encounter an exception when selecting a radio button:
"Value must be an array in multiple-selection mode at getMatSelectNonArrayValueError (select.es5.js:116) at MatSelect.push.."
This issue seems to arise from how the mat-select component processes changes within its structure, particularly with respect to the placement of radio buttons. Can anyone provide guidance on structuring the mat components to achieve the desired functionality?