如果是否选择了某个垫子选项，如何启用输入字段？

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

提问人：Ionut 提问时间：4/19/2023 最后编辑：Ionut 更新时间：4/19/2023 访问量：322

问：

根据该主题的可接受答案，我设法获得了单击选项的选定状态。我想根据某个选项的选择禁用输入。在下面的示例中，我能够在选中/取消选中任何选项时启用/禁用输入。例如，仅当第二个选项（蘑菇）未选中时，我才想禁用输入字段。如果选中第二个选项，则可以启用输入字段。我该怎么做？

StackBlitz 示例

角度 打字稿 angular-material mat-form-field mat-option

评论

0赞 Storytellerr 4/19/2023
您是否使用 Angular 表单来保存数据？
0赞 Ionut 4/19/2023
我所有的都在mat-form-field<form class="example-form" #connectDBForm="ngForm" (ngSubmit)="saveConnDB(connectDBForm.value)">
0赞 pero_hero 4/19/2023
stackoverflow.com/questions/57496789/......

答：

1赞 Storytellerr 4/19/2023 #1

您可以通过将 formcontrol 值附加到 mat-input 的 [disabled] 指令来实现这一点。

1）只需读取浇头（形式控制）值

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

2）将其附加到[disabled]指令中

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

我在这里更新了你的 stackblitz。如果有帮助，请点赞/选择。

0赞 Eliseo 4/19/2023 #2

如果选择某个值，则要禁用

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

如果在选择一个元素时想要禁用，例如

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

上一个：垫标签文本溢出省略号不起作用，因此垫图标覆盖垫标签

下一个：如何根据 mat-select 选项启用输入字段&gt;？