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