Cant set readonly on select if using FormControl.

[davisriska]

I would like to set readonly to true on a select, but if im using FormControl it gets overwritten. I do not want to set it as disabled as its not actually disabled, its just meant to be readonly. It works fine if ngModel is used. I assume its because of this line - https://github.com/ng-matero/extensions/blame/d1f98451c5b22baaf374f99bbce17b672456c576/projects/extensions/select/select.ts#L473

[davisriska]

If anyone else comes across this bug and needs a quick fix you can use this directive to override the function that breaks the readonly functionality -

import {Directive} from '@angular/core';
import {MtxSelect} from '@ng-matero/extensions/select';

@Directive({
    standalone: true,
    selector: '[readonlyFixForMtxSelect]'
})
export class ReadonlyFixForMtxSelect {

    constructor(
        private mtxSelect: MtxSelect,
    ) {
        this.mtxSelect.setDisabledState = this.setDisabledState.bind(this);
    }

    /**
     * Disables the select. Part of the ControlValueAccessor interface required
     * to integrate with Angular's core forms API.
     *
     * @param isDisabled Sets whether the component is disabled.
     */
    setDisabledState(isDisabled: boolean) {
        this.mtxSelect.disabled = isDisabled;
        // @ts-ignore
        this.mtxSelect._changeDetectorRef.markForCheck();
        this.mtxSelect.stateChanges.next();
    }
}

And use it like this -

<mtx-select
        readonlyFixForMtxSelect
        [formControlName]="key"
        [readonly]="true"
    >
    </mtx-select>

And to make the styling more inline with other material components that are made readonly you can add this style to your style.scss -

mtx-select[ng-reflect-readonly="true"] .ng-value-label {
    color: var(--mdc-filled-text-field-input-text-color) !important;
}

[nzbin]

17.3.5 has fixed.

[davisriska]

@nzbin Thank you very much for the quick response and fix! I appreciate it. I cant currently update and check because I'm running on 17.0 and have to recheck if I`m not going to break something else with the update, but looking over the code changes it looks like it would definitely fix it. For now my quick fix will do, but once I update SoonTM I will try to report back and close the issue. Or if you are confident that it was fixed, you can close the issue yourself.

As a side note, thank you very much for all the work you do with these extensions!