angulartypescriptangular-materialmat-form-fieldmat-option

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


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


Solution

  • 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.