动态插入组件时 ControlValueAccessor 不起作用

Question

使用implements ControlValueAccessor开发的InputFieldComponent组件

constructor(public cd: ChangeDetectorRef) {

}

onTouchedCallback = () => { };
onChangeCallback: any = () => { };

// register a handler that should be fired when something in the view has changed
registerOnChange(fn: any): void {
  this.onChangeCallback = fn;
}

// registers a handler specifically for when a control receives a touch event.
registerOnTouched(fn: any): void {
  this.onTouchedCallback = fn;
}

// writes new values from the form model into the view or any DOM property
writeValue(value: string): void {
  if (value !== this.innerValue) {
    this.innerValue = value;
  }
}

// textbox input change
onChange(event: any): void {
  this.onChangeCallback(event.target.value);
}

像这样动态添加。

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(InputFieldComponent);
const newComponent = container.createComponent(componentFactory);

设置

form.addControl("firstname",
                new FormControl("Some TEXT ", Validators.required));

newComponent.instance.formControlName = "firstname"

试图通过写下一行来触发writeValue：

newComponent.instance.cd.detectChanges();

但没有运气，如何解决这个问题？我想在文本框值中看到“一些文本”。

通常如果我使用这个组件 html，它可以正常工作。

这里是我尝试过的 stackblitz 链接：-

https://stackblitz.com/edit/angular-custom-input-init-value-d34jls

Answer 1

您正在混合模板驱动表单（使用ngModel）和反应式表单，is deprecated/possibly already removed 在您的 Angular 版本中。

我的建议是，将FormControl 输入到您刚刚创建的动态ControlValueAccessor 组件中：https://stackblitz.com/edit/angular-custom-input-init-value-fuxwks

我强烈建议您重新考虑您想要实现的任何设计。

附：使用<ng-template></ng-template> 而不是<template></template>。从 Angular 4 开始鼓励这样做。