如何根据垫单选按钮的值禁用垫输入字段?

Posted

技术标签:

【中文标题】如何根据垫单选按钮的值禁用垫输入字段?【英文标题】:How to disable a mat Input field based on the value of a mat radio button? 【发布时间】:2019-06-22 23:22:09 【问题描述】:

我的表单中有一个“mat-radio-group”,其中有 2 个“mat-radio-button”,值为“yes”和“no”。

我想根据用户的选择使用这些值来启用或禁用另一个输入字段(简单的 matInput)。

我还想默认禁用 matInput(在用户从无线电组中检查“是”或“否”之前)。

我正在使用 Angular 响应式表单,并为这些输入设置了表单控件名称。

假设 formGroup 名称是“myForm”。

以下是我的模板中的代码:

<mat-radio-group formControlName="myRadio">
          <mat-radio-button value="yes" required>Yes</mat-radio-button>
          <mat-radio-button value="no" required checked>No</mat-radio-button>
</mat-radio-group>

<mat-form-field>
          <input matInput formControlName="myInput" />
</mat-form-field>

【问题讨论】:

【参考方案1】:

更新为首选的反应方式

感谢@Severus 的评论,我想更新我的答案以反映在反应式表单上处理此问题的首选方式。我在下面的原始答案是“快速而肮脏”的方式,但是如果您想正确执行此操作,则应在创建表单时将 myInput 初始化为禁用:

FormControl( value: '', disabled: true )

然后在单选按钮控件上添加一个“启用程序”,如下所示:

this.myForm.get('myRadio').valueChanges.subscribe(value => 
    const enableOrDisable = value !== null ? 'enable' : 'disable';
    this.myForm.get('myInput')[enableOrDisable]();
);

原答案

注意:这种方法在使用模板驱动的表单时仍然有效,但不应该用于响应式表单方法。如果在模板表单中使用,您只需设置 disabled 值到绑定到单选按钮的ngModel

您应该能够将 disabled 设置为依赖字段的值。

<input matInput formControlName="myInput" [disabled]="!myForm.value?.myRadio" />

然后将表单中myRadio 的值初始化为null。如果您将单选值设置为 truefalse 而不是 yesno,那么您只需检查 null 值 (myForm.value?.myRadio !== null)。

【讨论】:

this.myForm.get('myRadio').valueChanges 应该在组件的什么地方调用? 我会在您初始化表单后立即执行此操作。我经常在我的ngOnInit() 中调用buildForm() 方法。在那里,您可以创建表单,然后订阅更改。确保在销毁时也取消订阅

以上是关于如何根据垫单选按钮的值禁用垫输入字段?的主要内容,如果未能解决你的问题,请参考以下文章

在选中单选按钮之前禁用输入字段(HTML)

需要根据 reactjs 中的单选按钮输入填充值

改进单选按钮的使用以启用/禁用表单字段

如果在 Sonata Admin 中选择了单选按钮,如何禁用单选按钮

根据单选按钮选择显示/隐藏输入字段

如何在 Jquery 中禁用输入(单选)按钮内的类