如何禁用文本区域或 mat-form-field

Posted 2023-03-05

【中文标题】如何禁用文本区域或 mat-form-field

【英文标题】：How to disable a text area or mat-form-field

【发布时间】：2018-05-14 06:21:24

【问题描述】：

我在表单字段中使用 Angular (4) + Angular Material 和 Reactive Forms。我怎样才能禁用它？我试图用谷歌搜索 disabled="true" 之类的东西。你能告诉我正确的语法吗？那一定很容易。谢谢！

我的例子：

<mat-form-field class="xxx-form-full-with">
    <textarea matInput placeholder="My description" formControlName="xxx"></textarea>
</mat-form-field>

【问题讨论】：

一切都取决于你想要什么以及你如何设置它最简单的方法是[disabled]="disabled"。然后将this.disabled 更改为true 或false。但是你展示了非常有限的代码来给出正确的答案。

有什么解决办法吗？我有同样的问题

【参考方案1】：

使用反应形式[disabled] 将不起作用。 您需要在 formControl 上设置禁用状态：

this.myForm = this.formBuilder.group(
  xxx: [value: 'someValue', disabled:true]
)

还请记住，在执行此操作时，此字段不会包含在表单对象中，例如在提交时。如果要检查所有值，包括禁用，请使用：

this.myForm.getRawValue();

【讨论】：

创建表单组输入时禁用它就可以了。谢谢！

【参考方案2】：

由于您使用的是ReactiveForms (formControl)，因此您应该使用

this.formGroupName.disable() 禁用所有组表单或

this.formGroupName.controls[controlNmae].disable() 用于特定的 formControl。

PS：如果您想再次启用该控件，您可以使用：

this.formGroupName.controls[controlNmae].enable()

【讨论】：

这是解决此问题的非常简洁实用的方法。

【参考方案3】：

@dmarquina 和 @AJT82 都提供了有效的答案。 （虽然我更喜欢 dmarquinas 的回答） 你也可以试试：

<mat-form-field appearance="outline">
    <mat-label>Some Label</mat-label>
    <input type="text" matInput formControlName="disabledFiled" readonly>
</mat-form-field>

注意：readonly 符号。

【讨论】：

更好的方法，因为 readonly 不会改变文本的颜色。 +1

右键单击，查看源代码，删除readonly，你又得到了一个可编辑字段。

【参考方案4】：

您可以将 disabled 属性用作 textarea 元素的硬编码属性

<textarea disabled></textarea>

或者您可以将其绑定到组件类中的方法，以根据某些条件动态禁用它。

[disabled]="getDisabledValue()"

在您的 .ts 文件中

getDisabledValue() 
  //your condition, in this case textarea will be disbaled.
  return true; 

【讨论】：

我很困惑。就像我用谷歌搜索的东西一样，它不起作用。我仍然可以更改这些值。知道为什么吗？所以问题可能是由不同的原因造成的。

这在表单中不起作用尝试另一种解决方案，如第一个解决方案

【参考方案5】：

补充@poderoso_mike 的答案，只读可用作[readonly]="true | false"。

使用 Angular Material 9 对我有用。

【参考方案6】：

<ng-container  *ngFor="let filter of filterSet">     
<mat-form-field appearance="outline"  class="w-11/12">
                  <mat-label> filter.name </mat-label>
                  <input
                    matInput [readonly]="filter.enteredValue!==''"
                    [formControlName]="filter.key"
                  />
                </mat-form-field>
</ng-container>

[readonly] 属性将有助于禁用表单域。

【参考方案7】：

如果您只想禁用它，请使用：

<mat-form-field class="xxx-form-full-with">
    <textarea matInput placeholder="My description" formControlName="xxx" disabled></textarea>
</mat-form-field>

其他用途：

<mat-form-field class="xxx-form-full-with">
    <textarea matInput placeholder="My description" formControlName="xxx" [disabled]="true"></textarea>
</mat-form-field>

您可以使用任何其他表达式/变量值来代替第二个示例中的“true”...

但是这种方式可能只适用于template driven forms 而不适用于reactive forms?? idk，因为我从不使用反应形式，但从最佳答案的外观来看，我猜似乎是这种情况......

【参考方案8】：

我知道禁用 textarea 字段的最简单方法是在其中添加“禁用”属性。像这样<textarea disabled></textarea>。

【参考方案9】：

formControlName: [value: 'someValue', disabled:true]

这将起作用，但请确保该字段处于读取模式，然后在提交表单时它将排除带有禁用标志的控件。因此，您不会获得修补到该表单字段的值。