Html 如何禁用文本区域或 mat-form-field
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47571466/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable a text area or mat-form-field
提问by dafna
I am using Angular (4) + Angular Material and Reactive Forms for my Form Field. How can I disable that? I tried to google for things like disabled="true"or something like that. May can you show me the right syntax? That must be easy. Thanks!
我正在为我的表单字段使用 Angular (4) + Angular Material 和 Reactive Forms。我怎样才能禁用它？我试图在谷歌上搜索诸如disabled="true" 之类的东西。你能告诉我正确的语法吗？那一定很容易。谢谢！
my example:
我的例子：
<mat-form-field class="xxx-form-full-with">
<textarea matInput placeholder="My description" formControlName="xxx"></textarea>
</mat-form-field>
回答by AJT82
With reactive forms [disabled]will not work.
You need to set the disabled status on the formControl instead:
使用反应式形式[disabled]将不起作用。您需要在 formControl 上设置禁用状态：
this.myForm = this.formBuilder.group({
xxx: [{value: 'someValue', disabled:true}]
})
Also remember when doing this, this field will not be included in the form object e.g when submitting. If you want to inspect all values, disabled included, use:
还请记住，在执行此操作时，此字段将不会包含在表单对象中，例如在提交时。如果要检查所有值，包括禁用，请使用：
this.myForm.getRawValue();
回答by dmarquina
Since you are using ReactiveForms (formControl)you should use
既然你正在使用，ReactiveForms (formControl)你应该使用
this.formGroupName.disable()to disable all the group form or
this.formGroupName.disable()禁用所有组表单或
this.formGroupName.controls[controlNmae].disable()for an especific formControl.
this.formGroupName.controls[controlNmae].disable()对于特定的 formControl。
回答by Ankit Kapoor
You can use disabled property as hardcoded property to your textarea element
您可以将 disabled 属性用作 textarea 元素的硬编码属性
<textarea disabled></textarea>
Or you can bind it to a method in your component class to disable it dynamically based on some condition.
或者您可以将其绑定到组件类中的方法，以根据某些条件动态禁用它。
[disabled]="getDisabledValue()"
In your .ts file
在您的 .ts 文件中
getDisabledValue() {
//your condition, in this case textarea will be disbaled.
return true;
}
回答by Noob
If you just want it disabled use:
如果您只想禁用它，请使用：
<mat-form-field class="xxx-form-full-with">
<textarea matInput placeholder="My description" formControlName="xxx" disabled></textarea>
</mat-form-field>
else use:
否则使用：
<mat-form-field class="xxx-form-full-with">
<textarea matInput placeholder="My description" formControlName="xxx" [disabled]="true"></textarea>
</mat-form-field>
In place of the "true" in the second example you can use any other expression/variable value that evaluates to a boolean...
代替第二个示例中的“true”，您可以使用任何其他计算结果为布尔值的表达式/变量值...
However this way may only work in template driven formsand not in reactive forms?? idk, since I never use reactive forms, but from the looks of the top answer, that seems to be the case I guess...
然而，这种方式可能只适用于模板驱动的形式，而不适用于反应形式？？idk，因为我从不使用反应式形式，但是从最佳答案的外观来看，我猜似乎就是这种情况......
回答by mighty_mike
Both @dmarquina and @AJT82 provided working answers.
(Although i like dmarquinas answer better)
You can also try:
@dmarquina 和 @AJT82 都提供了有效的答案。（虽然我更喜欢 dmarquinas 的回答）
您也可以尝试：
<mat-form-field appearance="outline">
<mat-label>Some Label</mat-label>
<input type="text" matInput formControlName="disabledFiled" readonly>
</mat-form-field>
Notice the: readonlynotation.
注意：只读符号。
