Angular自定义表单验证器引发大量错误，导致应用崩溃

问题背景 #

开发测试应用时，表单已与FormGroup绑定，标准验证（必填、长度限制等）正常工作。需为range_from和range_to数字输入框添加自定义验证，检查range_from是否小于range_to，但添加验证器后模态框崩溃，form对象变为undefined，出现大量错误。

相关代码 #

模板代码

<form [formGroup]="form" (ngSubmit)="addOrEditSensor()">
      <div class="block">
        <p
          [ngClass]="((name.errors?.required && name.touched) || (name.errors?.maxlength)) ? 'error' : 'error hidden'"
        >
          Fill this field. Length should be less then 30 symbols
        </p>
        <div class="input-block">
          <label class="label" for="name">Name</label>
          <input class="input_text" id="name" type="text" placeholder="Name" formControlName="name">
        </div>
      </div>
...

表单初始化代码

private fillForm(){
    this.form = new FormGroup({
      id: new FormControl(this.sensor.id),
      name: new FormControl(this.sensor.name, [Validators.required, Validators.maxLength(30)]),
      model: new FormControl(this.sensor.model, [Validators.required, Validators.maxLength(15)]),
      range_from: new FormControl(this.sensor.range_from, [Validators.required]),
      range_to: new FormControl(this.sensor.range_to, [Validators.required]),
      type: new FormControl(this.sensor.type, [Validators.required]),
      unit: new FormControl(this.sensor.unit, [Validators.required]),
      location: new FormControl(this.sensor.location, [Validators.required, Validators.maxLength(40)]),
      description: new FormControl(this.sensor.description, [Validators.required, Validators.maxLength(200)])
    })
  }

错误的自定义验证器代码

checkRange(control: FormControl){
    if (control.value >= this.form.value.range_to){
      return {invalidRange: true}
    }
    return null
  }

错误的验证器添加方式

range_from: new FormControl(this.sensor.range_from, [Validators.required, this.checkRange])

问题原因 #

1. this指向丢失：直接传入this.checkRange时，函数内部this不再指向组件实例，访问this.form会触发undefined错误。
2. 控件级验证器限制：单个FormControl的验证器无法跨控件访问值，且表单初始化阶段this.form尚未完全创建，导致取值失败。

解决方案 #

需使用表单组级自定义验证器实现跨控件验证，步骤如下：

1. 编写表单组级验证器 #

checkRangeValidator(formGroup: FormGroup): ValidationErrors | null {
  const rangeFrom = formGroup.get('range_from')?.value;
  const rangeTo = formGroup.get('range_to')?.value;

  // 处理值为空的情况
  if (rangeFrom == null || rangeTo == null) {
    return null;
  }

  // 转换为数字避免字符串比较错误
  const fromNum = Number(rangeFrom);
  const toNum = Number(rangeTo);

  if (!isNaN(fromNum) && !isNaN(toNum) && fromNum >= toNum) {
    // 给range_from标记错误
    formGroup.get('range_from')?.setErrors({ invalidRange: true });
    return { invalidRange: true };
  } else {
    // 验证通过时清除之前的错误
    if (formGroup.get('range_from')?.hasError('invalidRange')) {
      formGroup.get('range_from')?.setErrors(null);
    }
    return null;
  }
}

2. 为FormGroup绑定验证器 #

修改fillForm方法，将验证器添加到FormGroup的配置参数中：

private fillForm(){
    this.form = new FormGroup({
      id: new FormControl(this.sensor.id),
      name: new FormControl(this.sensor.name, [Validators.required, Validators.maxLength(30)]),
      model: new FormControl(this.sensor.model, [Validators.required, Validators.maxLength(15)]),
      range_from: new FormControl(this.sensor.range_from, [Validators.required]),
      range_to: new FormControl(this.sensor.range_to, [Validators.required]),
      type: new FormControl(this.sensor.type, [Validators.required]),
      unit: new FormControl(this.sensor.unit, [Validators.required]),
      location: new FormControl(this.sensor.location, [Validators.required, Validators.maxLength(40)]),
      description: new FormControl(this.sensor.description, [Validators.required, Validators.maxLength(200)])
    }, { validators: this.checkRangeValidator.bind(this) }) // 绑定组件上下文
  }

3. 模板中显示自定义错误 #

在range_from的错误提示区域添加自定义错误判断：

<p
  [ngClass]="((range_from.errors?.required && range_from.touched) || range_from.errors?.invalidRange) ? 'error' : 'error hidden'"
>
  起始值必须小于结束值
</p>

注意事项 #

• 使用bind(this)保证验证器内部this指向组件实例，避免上下文丢失。
• 需处理值为空或非数字的情况，防止额外错误。
• 验证通过时手动清除错误标记，确保表单状态正确更新。

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