Topic: disabling mdb-select in a reactive form
Dear Arek,
Disabling the controls renders it useless in a form so it looks like what I really want is to make autocomlete readonly.
Can you fix readonly attribute on mdb-select ?
Since we are talking about a form element, disabling it removes it from the form object but it should still be there.
What I need is to keep the form object intact but prevent the user from changing an <mdb-select> element, making it "readonly", just as "readonly" works on <input> elements. e.g., the user will not be able to open the dropdown nor change its value.
Today, setting [readonly]=true on an <mdb-select> has no effect.
mdb2 pro commented 6 years ago
Do you check it ?
Arkadiusz Idzikowski staff commented 6 years ago
If disable condition is not known at initialization, you can use reactive forms disable and enable methods.
For example:
this.yourFormGroupName.controls.yourFormControlName.disable();
this.yourFormGroupName.controls.yourFormControlName.enable();
Dear mdb2,
Could you describe in more details what is the exact problem with this attribute in mdb-select?
Regards,
Arek
Since we are talking about a form element, disabling it removes it from the form object but it should still be there.
What I need is to keep the form object intact but prevent the user from changing an <mdb-select> element, making it "readonly", just as "readonly" works on <input> elements. e.g., the user will not be able to open the dropdown nor change its value.
Today, setting [readonly]=true on an <mdb-select> has no effect.
Since we are talking about a form element, disabling it removes it from the form object but it should still be there.
What I need is to keep the form object intact but prevent the user from changing an <mdb-select> element, making it "readonly", just as "readonly" works on <input> elements. e.g., the user will not be able to open the dropdown nor change its value.
Today, setting [readonly]=true on an <mdb-select> has no effect.
Since we are talking about a form element, disabling it removes it from the form object but it should still be there.
What I need is to keep the form object intact but prevent the user from changing an <mdb-select> element, making it "readonly", just as "readonly" works on <input> elements. e.g., the user will not be able to open the dropdown nor change its value.
Today, setting [readonly]=true on an <mdb-select> has no effect.
Since we are talking about a form element, disabling it removes it from the form object but it should still be there.
What I need is to keep the form object intact but prevent the user from changing an <mdb-select> element, making it "readonly", just as "readonly" works on <input> elements. e.g., the user will not be able to open the dropdown nor change its value.
Today, setting [readonly]=true on an <mdb-select> has no effect.
Mdb-select was designed to work like native select which doesn't support readolny attribute. We will see if we can find a good solution for this problem. For now you can try those methods:
1. getRawValue provided by Reactive Forms
this.yourFormGroupName.getRawValue();
2. Block element with CSS
<div class="readonly-wrapper">
<mdb-select class="readonly-block" [options]="optionsSelect" formControlName="testSelect" placeholder="Choose your option"label="Example label"></mdb-select>
</div>
.readonly-wrapper {
cursor: not-allowed;
}
.readonly-wrapper .readonly-block {
pointer-events: none;
}FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 6.2.3
- Device: NA
- Browser: NA
- OS: NA
- Provided sample code: No
- Provided link: No