Angular下拉选择触发的自定义必填校验实现方案求助

核心思路 #

通过自定义表单组验证器结合下拉框状态监听，实现"选中下拉框时，两个文本框至少填一个"的动态验证逻辑，完全规避直接使用required关键字或Validator.required。

1. 组件TS代码实现 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';

@Component({
  selector: 'app-commission-setting',
  templateUrl: './commission-setting.component.html',
  styleUrls: ['./commission-setting.component.css']
})
export class CommissionSettingComponent implements OnInit {
  commissionForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化表单结构
    this.commissionForm = this.fb.group({
      payableFrequency: [''],
      payableCommission: this.fb.group({
        min: [''],
        max: ['']
      }, { validators: this.atLeastOneRequiredValidator(this.commissionForm) })
    });

    // 监听下拉框变化，强制子组重新验证
    this.commissionForm.get('payableFrequency')?.valueChanges.subscribe(() => {
      this.commissionForm.get('payableCommission')?.updateValueAndValidity({ emitEvent: false });
    });
  }

  // 自定义组验证器：下拉框选中时，min/max至少一个非空
  private atLeastOneRequiredValidator(parentForm: FormGroup): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      const selectedFrequency = parentForm.get('payableFrequency')?.value;
      const minValue = control.get('min')?.value?.trim();
      const maxValue = control.get('max')?.value?.trim();

      // 下拉框有值且两个字段都为空时，返回错误标记
      if (selectedFrequency && !minValue && !maxValue) {
        return { atLeastOneRequired: true };
      }

      return null;
    };
  }
}

2. HTML模板实现 #

<form [formGroup]="commissionForm" class="form-container">
  <!-- 支付频率下拉框 -->
  <mat-form-field appearance="fill">
    <mat-label>支付频率</mat-label>
    <mat-select formControlName="payableFrequency">
      <mat-option value="monthly">月度</mat-option>
      <mat-option value="quarterly">季度</mat-option>
      <mat-option value="yearly">年度</mat-option>
    </mat-select>
  </mat-form-field>

  <!-- 佣金区间组 -->
  <div formGroupName="payableCommission">
    <mat-form-field appearance="fill">
      <mat-label>最低佣金</mat-label>
      <input matInput formControlName="min">
      <mat-error *ngIf="commissionForm.get('payableFrequency')?.value && commissionForm.get('payableCommission')?.hasError('atLeastOneRequired')">
        请填写最低佣金或最高佣金中的至少一项
      </mat-error>
    </mat-form-field>

    <mat-form-field appearance="fill">
      <mat-label>最高佣金</mat-label>
      <input matInput formControlName="max">
      <mat-error *ngIf="commissionForm.get('payableFrequency')?.value && commissionForm.get('payableCommission')?.hasError('atLeastOneRequired')">
        请填写最低佣金或最高佣金中的至少一项
      </mat-error>
    </mat-form-field>
  </div>
</form>

关键说明 #

• 组验证器作用域：将验证器绑定到payableCommission组，而非单个控件，确保同时校验两个字段的组合状态。
• 动态验证触发：监听下拉框值变化，调用updateValueAndValidity强制子组重新验证，解决下拉框切换时验证状态不更新的问题。
• 错误提示逻辑：mat-error仅在下拉框选中且组验证失败时显示，符合需求场景。

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