在Angular Material Stepper中为文本框添加非FormGroup自定义验证

我来帮你搞定这个需求！你想要不用FormGroup，在用户点击Next按钮时验证First Name是否为空，为空就禁止跳转到下一步，对吧？咱们一步步来修改你的代码：

首先分析现有代码的问题 #

你的checkData方法里有个小错误——你获取的是fname输入框的值，但变量名写成了lname，而且直接return false不会阻止matStepperNext的默认跳转行为，因为这个指令会自动触发步进器前进。

修改后的TS代码 #

我们需要获取步进器的实例，手动控制跳转，同时添加错误状态提示：

import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
import {MatStepper} from '@angular/material/stepper';

@Component({
  selector: 'stepper-optional-example',
  templateUrl: 'stepper-optional-example.html',
  styleUrls: ['stepper-optional-example.css']
})
export class StepperOptionalExample implements OnInit {
  // 获取步进器实例
  @ViewChild('stepper') stepper!: MatStepper;
  // 获取First Name输入框的模板引用
  @ViewChild('firstNameInput') firstNameInput!: ElementRef<HTMLInputElement>;
  // 控制错误提示的显示状态
  firstNameRequired = false;

  constructor() {}

  ngOnInit() { }

  checkData(event: Event) {
    // 阻止默认的跳转行为，由我们自己控制是否前进
    event.preventDefault();
    
    // 获取First Name的值并去除前后空格
    const firstName = this.firstNameInput.nativeElement.value.trim();
    
    if (!firstName) {
      this.firstNameRequired = true;
      alert('First Name不能为空！'); // 你也可以换成更友好的页面提示
      return;
    }
    
    // 验证通过，隐藏错误提示，手动触发步进器前进
    this.firstNameRequired = false;
    this.stepper.next();
  }
}

修改后的HTML代码 #

我们给输入框添加模板引用，加上错误提示，并把事件对象传给checkData方法：

<mat-horizontal-stepper #stepper>
  <mat-step>
    <div class="m-10">
      <!-- 添加模板引用，方便组件获取输入框 -->
      <input type="text" #firstNameInput placeholder="First Name">
      <!-- 错误提示，验证不通过时显示 -->
      <span *ngIf="firstNameRequired" style="color: #f44336; font-size: 0.75rem; display: block; margin-top: 4px;">
        First Name是必填项
      </span>
    </div>
    <div class="m-10">
      <input type="text" id="lname" placeholder="Last Name">
    </div>
    <div>
      <!-- 把事件对象传给checkData方法，用来阻止默认跳转 -->
      <button mat-button (click)="checkData($event)" matStepperNext>Next</button>
    </div>
  </mat-step>
  <mat-step [optional]="isOptional">
    <button mat-button matStepperPrevious>Back</button>
    <button mat-button matStepperNext>Next</button>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

关键知识点说明 #

1. 阻止默认跳转：通过event.preventDefault()阻止matStepperNext指令的默认行为，这样我们就能完全控制步进器的前进时机。
2. 手动控制步进器：用@ViewChild获取步进器实例，验证通过后调用this.stepper.next()手动前进到下一步。
3. 模板引用替代getElementById：使用Angular的模板引用变量（#firstNameInput）比document.getElementById更符合Angular的最佳实践，避免依赖DOM元素的ID。
4. 用户体验优化：添加了错误提示文本，让用户清楚知道哪里出了问题，比单纯的alert更友好。

这样修改后，当First Name为空时，点击Next按钮就不会跳转到下一步，同时会显示错误提示；验证通过后才会正常前进。

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