Angular中如何通过(ngModelChange)引用模型？附计算器场景

首先先把你的模型定义规范成标准TypeScript代码：

interface IModel {
  a: number | null;
  b: number | null;
  c: number | null; // c为a + b的计算结果
}

接下来我帮你完善组件的完整实现，确保它符合ControlValueAccessor规范，同时实现结果不能为7的校验逻辑：

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CalculatorComponent),
      multi: true
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => CalculatorComponent),
      multi: true
    }
  ]
})
export class CalculatorComponent implements ControlValueAccessor, Validator {
  myModel: IModel = { a: null, b: null, c: null };
  private onChange: (value: IModel) => void = () => {};
  private onTouched: () => void = () => {};
  private isDisabled = false;

  // 处理输入变化并自动计算结果
  calc(prop: keyof IModel, event: string): void {
    const inputValue = event ? Number(event) : null;
    // 只允许修改a和b，c是计算结果不能手动编辑
    if (prop === 'a' || prop === 'b') {
      this.myModel[prop] = isNaN(inputValue) ? null : inputValue;
      // 自动计算结果c
      this.myModel.c = (this.myModel.a ?? 0) + (this.myModel.b ?? 0);
      // 通知表单系统值已变化
      this.onChange({ ...this.myModel });
      // 标记组件已被触摸
      this.onTouched();
    }
  }

  // ControlValueAccessor核心方法：接收外部传入的表单值
  writeValue(value: IModel): void {
    if (value) {
      this.myModel = { ...value };
    }
  }

  // ControlValueAccessor核心方法：注册值变化回调
  registerOnChange(fn: (value: IModel) => void): void {
    this.onChange = fn;
  }

  // ControlValueAccessor核心方法：注册触摸状态回调
  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  // ControlValueAccessor核心方法：设置组件禁用状态
  setDisabledState(isDisabled: boolean): void {
    this.isDisabled = isDisabled;
  }

  // 自定义校验逻辑：结果不能为7
  validate(control: AbstractControl): ValidationErrors | null {
    const modelValue = control.value as IModel;
    if (modelValue?.c === 7) {
      return { resultCannotBeSeven: '计算结果不能为7' };
    }
    return null;
  }
}

然后是你的模板完整写法，我补充了禁用状态绑定和结果输入框的禁用设置：

<div class="calculator">
  <input 
    type="text" 
    [ngModel]="myModel.a" 
    (ngModelChange)="calc('a', $event)"
    [disabled]="isDisabled"
    placeholder="输入第一个数"
  /> 
  <span>+</span>
  <input 
    type="text" 
    [ngModel]="myModel.b" 
    (ngModelChange)="calc('b', $event)"
    [disabled]="isDisabled"
    placeholder="输入第二个数"
  /> 
  <span>=</span>
  <input 
    type="text" 
    [ngModel]="myModel.c" 
    disabled
    placeholder="计算结果"
  />
</div>
<!-- 可选：显示校验错误提示 -->
<div *ngIf="control?.invalid && control?.touched" class="error">
  {{ control.getError('resultCannotBeSeven') }}
</div>

关键细节说明 #

• ControlValueAccessor集成：通过NG_VALUE_ACCESSOR提供者，让组件能完美适配Angular的模板驱动和响应式表单，支持双向绑定。
• 计算逻辑：calc方法仅允许修改a和b，自动计算c并同步给表单系统，同时标记组件为触摸状态，符合表单控件的交互规范。
• 校验逻辑：通过NG_VALIDATORS提供者实现自定义校验，当结果c等于7时，组件的valid状态会自动变为false，并返回自定义错误信息。
• 禁用状态同步：实现setDisabledState方法，确保组件内的输入框禁用状态和外部表单控件的禁用状态保持一致。

这样你的组件就完全满足需求了，既能作为标准表单控件使用，又能严格限制结果不能为7~

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