How to disable a text area or mat-form-field

Question

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>

Answer 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();

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

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

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

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

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] attribute will help in disabling the form-field.

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

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

Answer 9

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.

Answer 10

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.

Answer 11

I'm trying my possible answer to the above question

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

Answer 12

HTML part

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

Code behind

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