Mat-select lacks disabled (readonly) option
See original GitHub issueReproduction
Steps to reproduce:
- Create a project
- Add Angular material to the project
- Create a form with fieldset in it and mat-select in it (form -> fieldset -> mat-select)
- Add
[disabled]to fieldset inside form tag to betrueon submit - Force
disabledto become true - Observe
mat-selectthat user can interact with even though they should not
Expected Behavior
Selector should be disabled.
Actual Behavior
It is not.
Additional info
I’ve read that mat-select has no readonly state because “native select doesn’t have it”, HOWEVER I want to point that when you make fieldset disabled the native selector disables and the user CANNOT modify value on form sumit. BUT when using Angular material user CAN change the value during submit even though it is inside fieldset[disabled].
This makes it tricky to work with forms non-stop (for example when you can submit form, then form needs to be locked until it’s submitted, after that you enable form and reset it’s submitted state and let the user change/save the form again).
Issue Analytics
- State:
- Created 4 years ago
- Reactions:10
- Comments:8 (2 by maintainers)
Top Results From Across the Web
How to make a 'mat-select' readonly? - Stack Overflow
Add CSS to both select block and mat-form-field block, these can be applied automatically to all the select elements:
Read more >Angular (forked) - StackBlitz
<h4>Select with disabled</h4> · <mat-form-field appearance="fill"> · <mat-label>Favorite food</mat-label> · <mat-select disabled> · <mat-option *ngFor="let food of ...
Read more >dynamic disable/enable in mat-select does not work properly
I need to disable/enable this select depending on other inputs value. Since [disabled] is no longer supported by reactive forms I used the...
Read more >Button toggle - Angular Material
<mat-button-toggle> are on/off toggles with the appearance of a button. These toggles can be configured to behave as either radio-buttons or checkboxes.
Read more >mat select search angular material - You.com
Instead of using a mat-select, use a mat-autocomplete. https://material.angular.io/components/autocomplete/overview You can make it work the same as a mat- ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
pointer event can’t prevent keyboard control. disabled is different from read-only. I think it is a reasonable demand.
Please add readonly to mat-select!!