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;

}

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.

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.

Dear mdb2,

Could you describe in more details what is the exact problem with this attribute in mdb-select?

Regards,

Arek

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 ?