Angular 16中如何禁用div/表单内所有元素？

问题原因 #

• this.loginForm.disable()仅会禁用绑定了formControl/formControlName的表单控件（如input），未绑定表单控件的<button>和不属于表单控件的<a>标签不会受影响。
• HTML原生<fieldset disabled>同样只作用于表单控件，<a>本身没有原生disabled属性，因此无法被其禁用。

实现类似谷歌登录的完整禁用效果 #

通过一个布尔状态变量统一控制所有元素的禁用状态，结合逻辑处理和CSS样式实现完整的禁用体验：

1. 组件类中定义控制变量

在login.component.ts中添加状态变量及控制方法：

isFormDisabled = false;

// 禁用表单及所有元素
disableForm() {
  this.isFormDisabled = true;
  this.loginForm.disable(); // 禁用表单控件
}

// 恢复表单及所有元素
enableForm() {
  this.isFormDisabled = false;
  this.loginForm.enable(); // 启用表单控件
}

2. 更新模板HTML

修改login.component.html，给按钮和<a>标签添加状态控制：

<div class="signin-wrapper">
  <mat-card>
    <form [formGroup]="loginForm" (ngSubmit)="onFormSubmit()">
      <mat-card-header>
        <mat-card-title>Sign in</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <mat-form-field appearance="outline">
          <mat-label>Email</mat-label>
          <input required matInput type="email" placeholder="eg. test@email.com" formControlName="userEmailAddress">
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>Password</mat-label>
          <input required matInput type="password" placeholder="eg. ************" formControlName="userPassword">
        </mat-form-field>
      </mat-card-content>
      <mat-card-actions>
        <!-- 控制按钮禁用状态 -->
        <button mat-raised-button color="primary" type="submit" [disabled]="isFormDisabled">Sign in</button>
      </mat-card-actions>
      <mat-card-footer>
        <div class="text-center">
          Not Registered? 
          <!-- 控制链接跳转及样式 -->
          <a 
            [routerLink]="isFormDisabled ? null : '../register'"
            [class.disabled-link]="isFormDisabled"
          >
            Register
          </a>
        </div>
      </mat-card-footer>
    </form>
    <mat-progress-bar *ngIf="inProgress" mode="indeterminate"></mat-progress-bar>
  </mat-card>
</div>

3. 添加禁用样式

在login.component.css中添加<a>标签的禁用样式，模拟原生禁用的视觉和交互效果：

.disabled-link {
  pointer-events: none; /* 禁止点击交互 */
  color: #999; /* 设置灰色文字 */
  cursor: not-allowed; /* 显示禁用光标 */
  text-decoration: none; /* 可选：去掉下划线 */
}

说明 #

• 按钮通过[disabled]绑定状态后，Angular Material按钮会自动应用禁用样式并阻止点击。
• <a>标签通过将routerLink设为null阻止路由跳转，配合CSS禁止点击事件并修改样式，达到与禁用一致的体验。

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