如何在Angular中为表单控件设置setValue且不触发验证？

你遇到的问题根源是：在验证器函数里调用control.setValue()时，Angular默认会触发valueChanges事件，而验证器会监听这个事件重新执行，从而形成无限循环。

要解决这个问题，只需要在调用setValue（或patchValue）时传入配置选项{ emitEvent: false }，这样修改控件值时不会触发valueChanges事件，自然也就不会重新触发验证：

control.setValue(control.value.replace("other", ""), { emitEvent: false });

修改后的完整验证器函数如下：

export function myValidatorFn(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    if (control.value) {
      if (control.value.indexOf("something") > 0) {
        return { myError: { value: true } };
      }
      // 阻止事件触发，避免验证循环
      control.setValue(control.value.replace("other", ""), { emitEvent: false });
    }
    return null;
  };
}

额外提醒：虽然这种方法能解决循环问题，但从职责分离的角度来说，验证器的核心职责应该是验证值的合法性，而非修改值。更合理的做法是通过订阅控件的valueChanges来处理值的转换，或者在指令中监听输入事件来修改值，这样代码逻辑会更清晰，也符合Angular表单的设计理念。

内容的提问来源于stack exchange，提问作者Sebastián Rojas