如何实现基于变量而非输入值的Angular Form表单验证

问题根因 #

你现有代码存在4个核心问题导致验证不生效：

• 自定义验证器的this指向丢失，无法访问组件实例的selectedMessages变量
• 你把同步验证器错误放到了FormGroup的第三个参数（异步验证器位置），不会被触发
• 验证器定义要求传入RegExp参数，但实际使用时没有传参，逻辑不匹配
• 子组件返回选中内容后，没有主动触发表单控件的校验更新，表单状态不会同步变化

修正后的组件代码 #

export class SignUpComponent implements OnInit {
  isLinear = false;
  hide = true;

  userInfoForm: FormGroup;
  messagesForm: FormGroup;
  timeForm: FormGroup;


  popularMessages: PopularMessage[] = [];
  selectedMessages: string[] = [];
  timeSelected: string = "";

  constructor(private _formBuilder: FormBuilder, private router: Router, private http: HttpService) {

    this.userInfoForm = this._formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', Validators.email],
      password: ['', Validators.minLength(6)],
      confirmPassword: ['', Validators.minLength(6)],
      phone: ['', Validators.required],
    });

    // 修正1：把自定义验证器放到同步验证器数组中，不需要的内置required可以删掉
    this.messagesForm = this._formBuilder.group({
      messages: ['', [this.messageSelectedValidator]]
    })

    this.timeForm = this._formBuilder.group({
      time: ['', Validators.required]
    });
  }

  // 修正2：用箭头函数定义验证器，自动绑定this指向组件实例，删除多余的RegExp参数
  messageSelectedValidator = (control: AbstractControl): ValidationErrors | null => {
    return this.hasValidSelectedMessage() ? null : { needsMessageSelected: true }
  };

  private hasValidSelectedMessage(): boolean {
    return this.selectedMessages.length > 0;
  }

  public selectedMessagesEmitterParent(values: string[]): void {
    this.selectedMessages = values;
    // 修正3：选中内容更新后主动触发表单校验，同步更新表单状态
    this.messagesForm.get('messages')?.updateValueAndValidity();
  }
}

可选模板优化（增加错误提示） #

你可以在模板中补充校验失败提示，降低用户理解成本：

<mat-step [stepControl]="messagesForm" label="Messages">
      <form [formGroup]="messagesForm">
        <app-messages-selector [popularMessages]="popularMessages"
          (selectedMessagesEmitter)="selectedMessagesEmitterParent($event)">
        </app-messages-selector>
        <!-- 新增错误提示 -->
        <mat-error *ngIf="messagesForm.get('messages')?.hasError('needsMessageSelected')">
          请至少选择1条消息
        </mat-error>
        <div>
          <button mat-button matStepperPrevious>Back</button>
          <button mat-raised-button matStepperNext color="primary" >Next</button>
        </div>
      </form>
    </mat-step>

逻辑说明 #

这里的messages是虚拟表单控件，本身不需要承载输入值，仅用来关联自定义校验逻辑，步进器的stepControl会自动读取messagesForm的校验状态，只要selectedMessages为空，表单就会处于非法状态，用户无法点击下一步跳转。

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