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