ngModelChange 应该与自定义表单控件一起使用吗？答案

【问题标题】：Should ngModelChange work with custom form control?ngModelChange 应该与自定义表单控件一起使用吗？
【发布时间】：2017-03-29 19:12:02
【问题描述】：

假设我正在制作一个自定义表单控件。我可以这样做吗？

<custom-control [ngModel]="myModelVariable" (ngModelChange)="modelHasChanged($event)"></custom-control>

我能够让 [(ngModel)] 使用我制作的所有表单控件，但我无法检查更改。很多使用我的组件的人都需要这个，我想知道是否有一种干净的方法可以在不创建@Output EventEmitters 的情况下做到这一点。我在想我做的不对，但也许我错了。

这是一个遵循我理解的模式的示例组件实现：

@Component({
  selector: 'custom-control',
  providers: [
    { provide: NG_VALUE_ACCESSOR, useClass: CustomControlComponent, multi: true }
  ]
})
export class CustomControlComponent implements ControlValueAccessor {

  private onChangeCallback: (_: any) => void = (_: any) => {};
  private onTouchedCallback: () => void = () => {};

  private innerValue: any;

  get value(): any {
    return this.innerValue;
  }

  set value(val: any) {
    if (val !== this.innerValue) {
      this.innerValue = val;
      this.onChangeCallback(this.innerValue);
    }
  }

  writeValue(val: any) {
    if (val !== this.innerValue) {
      this.innerValue = val;
    }
  }

  registerOnChange(fn: any) {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any) {
    this.onTouchedCallback = fn;
  }

}

【问题讨论】：

如果[(ngModel)]="xxx" 有效，(ngModelChange)="xxx = $event" 也会有效。我看不出是什么原因造成的。

标签： angular typescript

【解决方案1】：

经过仔细检查，一些有问题的组件没有在 setter 中调用 onChangedCallback，因此我们遇到了问题。其他的没有被正确实施。

抱歉打扰了，Angular 世界。

【讨论】：