Angular Material进度条显示及表单提交时禁用mat-card至加载完成

这其实很容易实现，核心就是用一个状态变量来同步控制进度条显示、表单禁用和卡片的交互状态，我给你一步步拆解：

1. 定义状态变量与表单逻辑 #

首先在组件类里声明一个isLoading布尔变量，用来标记当前是否处于加载状态，再配合表单的提交逻辑，在请求开始时设为true，请求结束（无论成功失败）再设为false：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
  myForm: FormGroup;
  isLoading = false;

  constructor(private fb: FormBuilder, private http: HttpClient) {
    // 初始化表单，根据你的实际需求添加控件
    this.myForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    // 表单验证不通过直接返回
    if (this.myForm.invalid) return;
    
    this.isLoading = true;
    // 替换成你的实际API请求
    this.http.post('your-submit-api', this.myForm.value)
      .subscribe({
        next: (res) => {
          // 处理提交成功的逻辑，比如弹窗提示
          console.log('提交成功:', res);
        },
        error: (err) => {
          // 处理提交失败的逻辑
          console.error('提交失败:', err);
        },
        complete: () => {
          // 请求完成后无论结果如何，都关闭加载状态
          this.isLoading = false;
        }
      });
  }
}

2. 模板层同步状态 #

在模板里，我们要做三件事：显示进度条、禁用整个表单、让Mat-Card看起来是“禁用”且不可交互的状态：

<!-- 给Mat-Card绑定加载状态类 -->
<mat-card [class.loading]="isLoading">
  <!-- 加载时显示 indeterminate 进度条 -->
  <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>

  <mat-card-content>
    <!-- 给表单绑定disabled状态，自动禁用所有内部控件 -->
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()" [disabled]="isLoading">
      <mat-form-field appearance="fill">
        <mat-label>姓名</mat-label>
        <input matInput formControlName="name">
        <mat-error *ngIf="myForm.get('name')?.invalid">请输入有效的姓名</mat-error>
      </mat-form-field>

      <mat-form-field appearance="fill">
        <mat-label>邮箱</mat-label>
        <input matInput formControlName="email" type="email">
        <mat-error *ngIf="myForm.get('email')?.invalid">请输入有效的邮箱地址</mat-error>
      </mat-form-field>

      <!-- 提交按钮也要单独控制状态，避免表单禁用失效的情况 -->
      <button mat-raised-button color="primary" type="submit" [disabled]="myForm.invalid || isLoading">
        {{ isLoading ? '提交中...' : '提交表单' }}
      </button>
    </form>
  </mat-card-content>
</mat-card>

3. 添加CSS视觉与交互控制 #

最后加一点CSS，让加载中的Mat-Card看起来是禁用状态，并且阻止用户点击任何元素：

/* 加载中的卡片样式：半透明+阻止交互 */
.mat-card.loading {
  opacity: 0.7;
  pointer-events: none;
  position: relative; /* 让进度条可以绝对定位在卡片顶部 */
}

/* 把进度条固定在卡片顶部，视觉上更直观 */
.mat-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

额外注意点 #

如果你的Mat-Card里有不在<form>标签内的元素（比如独立的操作按钮），记得给这些元素单独添加[disabled]="isLoading"属性，或者依靠pointer-events: none来阻止用户交互。

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