Question

我在表格字段中使用Angula（4）+ Angular Material和Reactive Forms。我怎么能禁用它？我试过谷歌，但像禁用=“真”之类的东西。你能告诉我正确的语法吗？这一定很容易。谢谢！

我的例子：

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

Answer 1

使用被动表单[disabled]将无效。您需要在formControl上设置禁用状态：

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

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

this.myForm.getRawValue();

Answer 2

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

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

请注意：只读表示法。

Answer 3

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

<textarea disabled></textarea>

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

[disabled]="getDisabledValue()"

在您的.ts文件中

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

Answer 4

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

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

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

Answer 5

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

<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，因为我从不使用反应形式，但从最高答案的外观来看，我猜似乎是这种情况...

Answer 6

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

使用 Angular Material 9 对我很有用。

Answer 7

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

Answer 8

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

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

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

8 个答案: