Angular中表单验证器定义有误？跨控件值比较验证问题求助

我看了你的问题，跨控件验证确实需要绑定到FormGroup上，你的sourcePortsValidator和destPortsValidator大概率是在获取控件值、错误关联或者验证逻辑上出了问题，我给你整理一个正确的实现方案，你可以对照调整：

1. 编写FormGroup级别的验证器 #

首先要写一个针对整个表单组的验证器，用来检查源端口是否小于目标端口。这个验证器需要接收FormGroup作为参数，然后获取两个控件的值进行比较，同时要处理验证通过时清除错误的情况：

import { FormGroup, ValidationErrors, Validators } from '@angular/forms';

function portRangeValidator(group: FormGroup): ValidationErrors | null {
  // 获取两个控件的值
  const sourcePort = group.get('sourcePort')?.value;
  const destPort = group.get('destPort')?.value;

  // 先跳过值未填写或非数字的情况，交给必填/数字验证器处理
  if (sourcePort == null || destPort == null || isNaN(Number(sourcePort)) || isNaN(Number(destPort))) {
    return null;
  }

  const sourceNum = Number(sourcePort);
  const destNum = Number(destPort);

  // 核心验证逻辑：源端口 >= 目标端口时触发错误
  if (sourceNum >= destNum) {
    // 给两个控件分别绑定错误，方便模板中单独提示
    group.get('sourcePort')?.setErrors({ portRange: true });
    group.get('destPort')?.setErrors({ portRange: true });
    return { portRange: '源端口必须小于目标端口' };
  } else {
    // 验证通过时，清除之前可能存在的portRange错误
    if (group.get('sourcePort')?.hasError('portRange')) {
      group.get('sourcePort')?.setErrors(null);
    }
    if (group.get('destPort')?.hasError('portRange')) {
      group.get('destPort')?.setErrors(null);
    }
    return null;
  }
}

2. 将验证器绑定到FormGroup #

创建表单的时候，把这个验证器添加到FormGroup的validators配置项中，而不是单个控件上：

import { FormBuilder } from '@angular/forms';

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    sourcePort: ['', [
      Validators.required,
      Validators.min(1),
      Validators.max(65535)
    ]],
    destPort: ['', [
      Validators.required,
      Validators.min(1),
      Validators.max(65535)
    ]]
  }, { validators: portRangeValidator }); // 这里绑定组验证器
}

3. 模板中显示错误信息 #

在模板里针对每个控件单独显示portRange错误，同时保留原有单个控件的验证提示：

<div [formGroup]="myForm">
  <div class="form-group">
    <label>源端口</label>
    <input 
      type="number" 
      formControlName="sourcePort"
      class="form-control"
    >
    <!-- 单个控件验证错误 -->
    <div *ngIf="myForm.get('sourcePort')?.hasError('required')" class="text-danger">
      请输入源端口
    </div>
    <div *ngIf="myForm.get('sourcePort')?.hasError('min') || myForm.get('sourcePort')?.hasError('max')" class="text-danger">
      端口必须在1-65535之间
    </div>
    <!-- 跨控件验证错误 -->
    <div *ngIf="myForm.get('sourcePort')?.hasError('portRange')" class="text-danger">
      源端口必须小于目标端口
    </div>
  </div>

  <div class="form-group">
    <label>目标端口</label>
    <input 
      type="number" 
      formControlName="destPort"
      class="form-control"
    >
    <!-- 单个控件验证错误 -->
    <div *ngIf="myForm.get('destPort')?.hasError('required')" class="text-danger">
      请输入目标端口
    </div>
    <div *ngIf="myForm.get('destPort')?.hasError('min') || myForm.get('destPort')?.hasError('max')" class="text-danger">
      端口必须在1-65535之间
    </div>
    <!-- 跨控件验证错误 -->
    <div *ngIf="myForm.get('destPort')?.hasError('portRange')" class="text-danger">
      目标端口必须大于源端口
    </div>
  </div>
</div>

为什么你的原有验证器可能出错？ #

常见的问题点包括：

• 没有正确从FormGroup中获取控件，比如用了错误的控件名称
• 验证通过时没有清除之前设置的错误，导致错误状态一直残留
• 错误没有绑定到具体控件，导致模板无法检测到单个控件的跨验证错误
• 没有处理值为非数字的情况，导致比较逻辑出错

按照上面的方案调整后，应该就能正常实现跨控件的端口值比较验证了。

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