Angular 4 双控件同步校验：端口表单校验需求与实现疑问

看起来你已经在尝试实现两个端口控件的同步校验了，但跨控件的验证器通常需要绑定到表单组而非单个控件上，我来帮你整理一个完整的可行方案，覆盖你提到的所有校验规则：

1. 表单组构建与基础验证 #

首先，我们先创建包含port_start和port_end的表单组，给每个控件添加必填、数值范围的基础验证规则：

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

// 在组件类中
constructor(private fb: FormBuilder) {}

ngOnInit() {
  // 假设object是你的初始数据对象
  this.formModel = this.fb.group({
    port_start: [object.port_start || 0, [
      Validators.required,
      Validators.min(0),
      Validators.max(65535)
    ]],
    port_end: [object.port_end || 0, [
      Validators.required,
      Validators.min(0),
      Validators.max(65535)
    ]]
  }, { validators: this.portRangeValidator }); // 绑定跨控件验证器到表单组
}

2. 实现跨控件自定义验证器 #

接下来编写portRangeValidator函数，用来校验port_start必须小于port_end。这个函数需要接收表单组作为参数，返回验证错误对象或者null：

portRangeValidator(formGroup: FormGroup): ValidationErrors | null {
  const start = formGroup.get('port_start')?.value;
  const end = formGroup.get('port_end')?.value;

  // 先确保两个控件都有值（基础验证已处理必填，这里做二次判断更稳妥）
  if (start == null || end == null) {
    return null;
  }

  // 转为数字后比较，避免字符串对比的问题
  const startNum = parseInt(start, 10);
  const endNum = parseInt(end, 10);

  if (startNum >= endNum) {
    return { portRangeInvalid: '起始端口必须小于结束端口' };
  }

  return null;
}

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

在模板里，你可以针对单个控件的错误和表单组的交叉错误分别给出提示，让用户清晰知晓问题所在：

<form [formGroup]="formModel">
  <div>
    <label>起始端口：</label>
    <input formControlName="port_start" type="number">
    <!-- 单个控件的错误提示 -->
    <div *ngIf="formModel.get('port_start')?.invalid && formModel.get('port_start')?.touched">
      <span *ngIf="formModel.get('port_start')?.errors?.['required']">起始端口为必填项</span>
      <span *ngIf="formModel.get('port_start')?.errors?.['min'] || formModel.get('port_start')?.errors?.['max']">端口值必须在0-65535之间</span>
    </div>
  </div>

  <div>
    <label>结束端口：</label>
    <input formControlName="port_end" type="number">
    <!-- 单个控件的错误提示 -->
    <div *ngIf="formModel.get('port_end')?.invalid && formModel.get('port_end')?.touched">
      <span *ngIf="formModel.get('port_end')?.errors?.['required']">结束端口为必填项</span>
      <span *ngIf="formModel.get('port_end')?.errors?.['min'] || formModel.get('port_end')?.errors?.['max']">端口值必须在0-65535之间</span>
    </div>
  </div>

  <!-- 表单组的交叉验证错误提示 -->
  <div *ngIf="formModel.invalid && formModel.touched && formModel.errors?.['portRangeInvalid']">
    <span>{{ formModel.errors?.['portRangeInvalid'] }}</span>
  </div>
</form>

关键说明 #

• 跨控件验证器必须绑定到表单组上，这样才能同时获取两个控件的值进行对比；
• 验证器中记得将输入值转为数字类型，避免字符串比较导致的逻辑错误；
• 模板中区分单个控件错误和表单组错误，提升用户体验。

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