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

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

既然你正在使用，ReactiveForms (formControl)你应该使用

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

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

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

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

Answer 2

使用反应形式是[disabled]行不通的.您需要在formControl上设置禁用状态:

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

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

this.myForm.getRawValue();

Answer 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>

注意：只读符号。

Answer 4

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

<textarea disabled></textarea>

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

[disabled]="getDisabledValue()"

在您的 .ts 文件中

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

Answer 5

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

使用 Angular Material 9 对我来说很有效。