Question

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

<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;
  }

}

Answer 1

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

很抱歉打扰你，Angular世界。

ngModelChange应该使用自定义表单控件吗？

1 个答案: