如何在Angular的编辑/查看视图中设置mat-form-field为只读状态？

以下是几种实用的实现方案，适配不同类型的表单控件：

1. 原生readonly属性（适用于input/textarea） #

直接给输入类控件添加readonly属性，既能保留mat-form-field的样式，又能阻止用户编辑内容。

<!-- 单行输入框 -->
<mat-form-field>
  <input matInput placeholder="用户名" readonly [value]="user.name">
</mat-form-field>

<!-- 多行文本框 -->
<mat-form-field>
  <textarea matInput placeholder="个人简介" readonly [value]="user.bio"></textarea>
</mat-form-field>

2. 禁用控件+样式调整（适用于mat-select等不支持readonly的控件） #

mat-select不支持readonly属性，可通过disabled属性禁用，再调整CSS让禁用状态的视觉效果更接近只读（避免默认灰度过深影响查看）。

<!-- 禁用的mat-select -->
<mat-form-field>
  <mat-select placeholder="用户角色" disabled [value]="user.role">
    <mat-option value="admin">管理员</mat-option>
    <mat-option value="user">普通用户</mat-option>
  </mat-select>
</mat-form-field>

对应的CSS调整：

/* 修正禁用状态的文本和箭头颜色 */
mat-form-field.mat-form-field-disabled .mat-select-value-text {
  color: rgba(0, 0, 0, 0.87);
}
mat-form-field.mat-form-field-disabled .mat-select-arrow {
  color: rgba(0, 0, 0, 0.54);
}

注意：禁用控件不会被表单提交包含，若需要提交该值，可额外添加隐藏域同步数据。

3. 条件切换视图（区分查看/编辑模式） #

通过*ngIf和模板变量，在查看模式下用纯文本展示，编辑模式下启用可交互控件，体验更流畅。

<!-- 切换查看/编辑状态 -->
<mat-form-field *ngIf="isEditMode; else viewTemplate">
  <input matInput placeholder="用户名" [(ngModel)]="user.name">
</mat-form-field>
<ng-template #viewTemplate>
  <mat-form-field>
    <span matInput readonly>{{user.name}}</span>
  </mat-form-field>
</ng-template>

4. 自定义指令封装（复用性方案） #

针对大型项目，可封装自定义指令统一处理只读逻辑，减少重复代码。

指令代码：

import { Directive, Input, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appReadOnly]'
})
export class ReadOnlyDirective implements OnInit {
  @Input() appReadOnly: boolean = false;

  constructor(private el: ElementRef) {}

  ngOnInit(): void {
    const element = this.el.nativeElement;
    if (this.appReadOnly) {
      if (['INPUT', 'TEXTAREA'].includes(element.tagName)) {
        element.setAttribute('readonly', 'true');
      } else if (element.tagName.includes('MAT-SELECT')) {
        element.setAttribute('disabled', 'true');
        element.classList.add('readonly-select');
      }
    } else {
      element.removeAttribute('readonly');
      element.removeAttribute('disabled');
      element.classList.remove('readonly-select');
    }
  }
}

使用方式：

<mat-form-field>
  <input matInput placeholder="用户名" [appReadOnly]="!isEditMode" [(ngModel)]="user.name">
</mat-form-field>

<mat-form-field>
  <mat-select placeholder="用户角色" [appReadOnly]="!isEditMode" [(ngModel)]="user.role">
    <mat-option value="admin">管理员</mat-option>
    <mat-option value="user">普通用户</mat-option>
  </mat-select>
</mat-form-field>

配套CSS：

.readonly-select .mat-select-value-text {
  color: rgba(0, 0, 0, 0.87);
}
.readonly-select .mat-select-arrow {
  color: rgba(0, 0, 0, 0.54);
}

内容的提问来源于stack exchange，提问作者Carli Beeli