How can I set mat-form-field to readonly?

Question

How can I set mat-form-field to readonly in Angular for an edit/read view, so that users can still easily read it, but not edit it?

Answer 1

As the comment above suggests, simply put readonly on the <input>.

See the live demo.

input-overview-example.html

<form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Favorite food</mat-label>
    <input
      matInput
      placeholder="Ex. Pizza"
      value="Sushi"
      [formControl]="foodCtrl"
      readonly
    />
  </mat-form-field>
</form>

input-overview-example.ts

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'input-overview-example',
  styleUrls: ['input-overview-example.css'],
  templateUrl: 'input-overview-example.html',
})
export class InputOverviewExample implements OnInit {
  foodCtrl: FormControl;
  ngOnInit() {
    this.foodCtrl = new FormControl('');
  }
}