Angular如何实现输入验证通过后才更新ngModel并触发ngModelChange

你参考的是AngularJS（1.x版本）的文档规则，而你当前使用的是Angular 2+版本，二者的验证默认逻辑不同：Angular 2+默认无论验证是否通过，都会更新绑定的ngModel值并触发ngModelChange事件，这是你遇到每次输入都触发回调的原因。

以下是两种可实现需求的方案：

方案1：在回调中判断验证状态（改动最小） #

你已经在模板中声明了#validated="ngModel"的模板引用，直接将验证状态传入回调做判断即可：

调整模板代码 #

<input
  id="xInputControl"
  name="xInputControl"
  type="text"
  xInput
  class="form-control"
  [(ngModel)]="x"
  #validated="ngModel"
  (ngModelChange)="valueChanged(validated.valid)"
/>

调整回调逻辑 #

valueChanged(isValid: boolean) {
  // 验证不通过直接跳过后续逻辑
  if (!isValid) return;
  console.warn('x is ', this.x);
  // 原有业务逻辑
}

方案2：配置ngModelOptions对齐AngularJS行为 #

如果希望从根源实现「验证不通过就不更新模型、不触发change事件」的效果，可以添加ngModelOptions配置关闭无效值更新：

<input
  id="xInputControl"
  name="xInputControl"
  type="text"
  xInput
  class="form-control"
  [(ngModel)]="x"
  #validated="ngModel"
  [ngModelOptions]="{allowInvalid: false}"
  (ngModelChange)="valueChanged()"
/>

配置allowInvalid: false后，Angular会在输入值验证不通过时将模型设置为undefined，且仅在验证通过时触发ngModelChange事件，完全符合你最初的预期。

补充说明：你当前的自定义验证器逻辑中，输入值解析为1时会返回{ useLatestAggregation: control.value }的错误对象，该场景也会被判定为验证不通过，如果你预期1是合法值，需要调整验证器的返回逻辑。

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