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

Answer 1

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.

Answer 2

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')" ../>