How to enable input fields if a certain mat-option is selected or not?

Question

Based on this topic's accepted answer, I managed to get the selected state of the clicked option. I want to disable an input based on a selection of a certain option. With the below example, I am able to enable/disable the input when any option is checked/unchecked. For example, I want to disable the input field only if the second option (Mushroom) is unchecked. If the second option is checked, the input field could be enabled. How could I do it?

StackBlitz Example

https://stackoverflow.com/questions/57496789/how-to-know-if-a-mat-option-is-selected-or-not-from-a-click-event — pero_hero, Apr 19 '23 at 08:38

Storytellerr · Accepted Answer · 2023-04-19T08:29:38.920

You can achive this by attaching your formcontrol value to mat-input's [disabled] directive.

1)just read toppings(form control) value

isValueSelected(): boolean {
    var valueArray: any = this.toppings.value || [];
    console.log(valueArray, valueArray.includes('Mushroom'));
    return !valueArray.includes('Mushroom');
 }

2)attach it to [disabled] directive

<input id="numeDB_SQLite" type="text" name="numeDB_SQLite" [disabled]="isValueSelected()"/>

i have updated your stackblitz here. please upvote/select if helps.

score 0 · Answer 2 · answered Apr 19 '23 at 08:30

If want disabled if some value is selected

<input id="numeDB_SQLite" type="text" matInput 
      [disabled]="toppings?.value && toppings.value.length" ../>

If want disabled when one element is selected, e.g.

<input id="numeDB_SQLite" type="text" matInput 
          [disabled]="toppings?.value && toppings.value.includes('Mushroom')" ../>

How to enable input fields if a certain mat-option is selected or not?

2 Answers2