Angular 4下拉框自定义验证器在编辑表单中失效问题

看起来你的创建表单（createTradeEntryForm）里的自定义验证器工作正常，但编辑表单（tradeEditForm）里的同样逻辑失效了，这通常是因为验证器未正确注册到编辑表单的控件上，或者模板中的错误判断逻辑没有适配编辑表单，下面是一步步的排查和解决方法：

1. 确保编辑表单的ForeignCurrency控件已添加自定义验证器 #

首先检查组件类中构建tradeEditForm的代码，必须给ForeignCurrency控件添加和创建表单完全一致的自定义验证器，包括正确绑定this（因为验证器需要访问表单的BaseCurrency值）。

示例代码：

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

// 自定义验证器方法
private currencyMatchValidator(control: AbstractControl): ValidationErrors | null {
  // 获取父表单（确保能拿到BaseCurrency的值）
  const parentForm = control.parent;
  if (!parentForm) return null;

  const baseCurrency = parentForm.get('BaseCurrency')?.value;
  const foreignCurrency = control.value;

  // 当两个币种相同且都不为0（未选择状态）时返回错误
  return baseCurrency && foreignCurrency && baseCurrency === foreignCurrency 
    ? { currencyMismatch: 'Selected currency should be different from Base Currency!' } 
    : null;
}

// 构建创建表单（你的现有代码应该是对的）
this.createTradeEntryForm = this.fb.group({
  BaseCurrency: ['', Validators.required],
  ForeignCurrency: ['', [
    Validators.required,
    this.currencyMatchValidator.bind(this) // 必须绑定this
  ]]
});

// 重点：构建编辑表单时必须添加同样的验证器
this.tradeEditForm = this.fb.group({
  BaseCurrency: ['', Validators.required],
  ForeignCurrency: ['', [
    Validators.required,
    this.currencyMatchValidator.bind(this) // 这里不能漏！
  ]]
});

2. 修复编辑表单模板中的错误提示逻辑 #

你提供的tradeEditForm模板里没有显示ForeignCurrency的错误提示部分，而且即使添加了，也要确保是引用tradeEditForm的控件，而不是创建表单的控件（比如ForeignCurrency可能是创建表单的控件引用，编辑表单要换成tradeEditForm.get('ForeignCurrency')）。

补充后的tradeEditForm模板代码：

<form [formGroup]="tradeEditForm" class="form-horizontal ng-pristine ng-invalid" enctype="multipart/form-data" ngnativevalidate>
  <div class="modal-header">
    <h4 class="modal-title">Edit Trade</h4>
    <button type="button" class="close" (click)="editModal.hide()" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="card-block">
      <!-- BaseCurrency部分（你的现有代码） -->
      <div class="form-group row">
        <label class="col-md-3 form-control-label" for="BaseCurrency">Currency 1</label>
        <div class="col-md-9">
          <select formControlName="BaseCurrency" class="form-control" size="1" id="BaseCurrencyEdit" name="BaseCurrency">
            <option [selected]="true" disabled="" value="0">Please select</option>
            <option value="1">USD</option>
            <option value="2">NZD</option>
            <option value="3">AUD</option>
            <option value="4">ZAR</option>
            <option value="5">CHF</option>
            <option value="6">CAD</option>
            <option value="7">EUR</option>
            <option value="8">GBP</option>
            <option value="9">SGD</option>
            <option value="10">ILS</option>
          </select>
        </div>
      </div>

      <!-- 补充ForeignCurrency部分及错误提示 -->
      <div class="form-group row">
        <label class="col-md-3 form-control-label" for="ForeignCurrencyEdit">Currency 2</label>
        <div class="col-md-9">
          <select formControlName="ForeignCurrency" class="form-control" id="ForeignCurrencyEdit" name="ForeignCurrency">
            <option [selected]="true" disabled="" value="0">Please select</option>
            <option value="1">USD</option>
            <option value="2">NZD</option>
            <option value="3">AUD</option>
            <option value="4">ZAR</option>
            <option value="5">CHF</option>
            <option value="6">CAD</option>
            <option value="7">EUR</option>
            <option value="8">GBP</option>
            <option value="9">SGD</option>
            <option value="10">ILS</option>
          </select>
          <!-- 正确引用tradeEditForm的ForeignCurrency控件 -->
          <em *ngIf="tradeEditForm.get('ForeignCurrency')?.invalid && tradeEditForm.get('ForeignCurrency')?.dirty">
            Selected currency should be different from Base Currency!
          </em>
        </div>
      </div>
    </div>
  </div>
</form>

3. 编辑表单初始化后手动触发验证 #

当你给编辑表单赋值（比如从后端获取交易数据后），需要手动触发验证，因为初始值可能就存在BaseCurrency和ForeignCurrency相同的情况，而Angular不会自动触发初始值的验证。

示例代码：

// 假设你从后端获取了交易数据并赋值给表单
const tradeData = { /* 后端返回的交易数据 */ };
this.tradeEditForm.patchValue(tradeData);

// 触发整个表单的验证，确保验证器运行
this.tradeEditForm.updateValueAndValidity({ emitEvent: false });
// 或者单独触发ForeignCurrency控件的验证
// this.tradeEditForm.get('ForeignCurrency')?.updateValueAndValidity({ emitEvent: false });

4. 额外检查点 #

• 确保验证器中的BaseCurrency控件名称和表单中的formControlName完全一致（你的代码里是BaseCurrency，没问题）。
• 如果你的验证器是箭头函数，就不需要bind(this)，但如果是普通方法，必须绑定，否则this会指向undefined，无法获取表单控件。

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