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

Question

我正在使用Angular（4）+ Angular Material和Reactive Forms来创建表单字段，我该如何禁用表单字段？我尝试过像disabled =“true”之类的Google搜索结果，但还是无法实现。请问正确的语法是什么？这应该很容易。谢谢！

我的示例：

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

- dafna

---

所有这些都取决于你想要什么以及你如何设置，最简单的方法是使用 [disabled]="disabled"。然后在 true 或 false 中更改 this.disabled。 但是，你展示的代码有限，很难给出一个合适的答案。 - Swoox

有什么解决方案吗？我也遇到了同样的问题。 - Sergio Cano

Answer 1

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

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

当进行此操作时，请记住，该字段将不会包含在表单对象中，例如提交时。如果您想检查所有值，包括已禁用的值，请使用：

this.myForm.getRawValue();

- AT82

---

创建表单组输入并将其禁用即可解决问题。谢谢！ - Kody

Answer 2

由于您正在使用ReactiveForms (formControl)，因此应使用

this.formGroupName.disable()来禁用整个表单组或

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

PS：如果您想重新启用控件，可以使用：

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

- dmarquina

---

这是一个相当不错且实用的解决问题的方式。 - Ali Celebi

Answer 3

@dmarquina 和 @AJT82 都提供了可行的答案。(虽然我更喜欢dmarquina的答案)
你也可以尝试：

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

请注意: readonly 表示只读。

更新：
请注意，这可能是一个安全问题。正如Jnr在评论中发表的:
右键单击，查看源代码，删除readonly，你又可以编辑字段了。

(感谢Jnr提供宝贵意见！)

- mighty_mike

---

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

右键单击，查看源代码，删除“readonly”，然后您就可以再次获得可编辑字段了。 - Jnr

Answer 4

您可以将disabled属性作为硬编码属性添加到文本区域元素中。

<textarea disabled></textarea>

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

[disabled]="getDisabledValue()"

在您的.ts文件中

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

- Ankit Kapoor

---

我很困惑。像我谷歌搜索的东西一样，它不起作用。我仍然可以更改值。你有什么想法吗？所以问题可能是由不同的原因造成的。 - dafna

这个在表单内不起作用，尝试另一种解决方案，比如第一个。 - Ahmed Shalash

如果禁用功能无法正常工作，最好使用只读模式。 - undefined

Answer 5

补充 @poderoso_mike 的回答，readonly 可以使用 [readonly]="true | false"。

这对我在使用 Angular Material 9 时非常有效。

- Breno Gomes

---

已确认可用，注意它是在输入框中而不是 mat-form-field 中：<mat-form-field ...><input matInput formControlName="myFieldName" [readonly]="isReadOnly"> - bobtheowl2

Answer 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] 属性将有助于禁用表单字段。

- S J BHAVANA

Answer 7

我正在尝试我的可能答案来回答上述问题

 this.formGroupName.controls.controlName.disable();

- Mirali Chauhan

Answer 8

HTML 部分

<mat-form-field appearance="outline">
  <mat-label>Input</mat-label>
    <input matInput placeholder="anything 
       [formControl]="selectedInput" />
</mat-form-field>

代码后台

function(){
    this.selectedInput.disable();
}

- santhosh

Answer 9

对我来说，仅设置[disabled]="isThereAServiceError"是不够的。我目前使用的是Angular 13和Angular Material 13。这个方法对我有帮助：

<textarea
    [attr.disabled]="isThereAServiceError"
    [readonly]="isThereAServiceError"
    matInput
    ...

- Janos Vinceller

Answer 10

我遇到了一个问题，当我初始化表单时，我禁用了所有的响应式表单字段，就像这样：if (!isEditMode) {this.editForm.disable();}。

除了文本区域输入之外，每个输入都被禁用了。我通过在获取数据并修补表单后执行上述代码示例来解决了这个问题。

- Gary Tipton

---

如果您有新的问题，请通过单击提问按钮来提出。如果它有助于提供上下文，请包含此问题的链接。- 来自审核 - S.I.