'How to disable a text area or mat-form-field
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!
my example:
<mat-form-field class="xxx-form-full-with">
<textarea matInput placeholder="My description" formControlName="xxx"></textarea>
</mat-form-field>
Solution 1:[1]
With reactive forms [disabled]
will not work.
You need to set the disabled status on the formControl instead:
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();
Solution 2:[2]
Since you are using ReactiveForms (formControl)
you should use
this.formGroupName.disable()
to disable all the group form or
this.formGroupName.controls[controlNmae].disable()
for a specific formControl.
PS: if you would like to enable the control again, you could use:
this.formGroupName.controls[controlNmae].enable()
Solution 3:[3]
Both @dmarquina and @AJT82 provided working answers.
(Although i like dmarquinas answer better)
You can also try:
<mat-form-field appearance="outline">
<mat-label>Some Label</mat-label>
<input type="text" matInput formControlName="disabledFiled" readonly>
</mat-form-field>
Notice the: readonly notation.
Update:
Be aware that this can be a security issue. As Jnr posted in the comments:
Right-click, view source, remove readonly, and you got yourself an editable field again.
(thanks for the valuable input Jnr!)
Solution 4:[4]
You can use disabled property as hardcoded property to your textarea element
<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
getDisabledValue() {
//your condition, in this case textarea will be disbaled.
return true;
}
Solution 5:[5]
Complementing answer of the @poderoso_mike, readonly can be used as [readonly]="true | false"
.
It's have worked to me using Angular Material 9.
Solution 6:[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] attribute will help in disabling the form-field.
Solution 7:[7]
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...
However this way may only work in template driven forms and 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...
Solution 8:[8]
The easiest way I know to disable a textarea field is to just add the "disabled" attribute into it. like so <textarea disabled></textarea>
.
Solution 9:[9]
I ran into an issue where I am disabling all of my reactive form fields when I initialize my form like this:
if (!isEditMode) {this.editForm.disable();}
.
Every input was disabled except for the textarea input. I got around this issue by performing the above code example after I have fetched the data and have patched the form.
Solution 10:[10]
I'm trying my possible answer to the above question
this.formGroupName.controls.controlName.disable();
Solution 11:[11]
formControlName: [{value: 'someValue', disabled:true}]
This will work but make sure if you have that field is in read-mode, then while submitting form it will exclude the control with disabled flag. So you won't get value which you patched to that form field.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow