Angular 元素作为反应形式的原生形式控件

Question

我正在尝试将表单控件导出为 Angular 元素（Web 组件），并将其用作本机输入元素，以便它可以与 angular 响应式表单一起使用或使用本机 html 输入的类似库。

以下代码在作为模块中的 angular 组件导出时有效。当我将其导出为 Web 组件并尝试以反应形式使用它时遇到问题。

此代码是使用 Angular 7.1 框架编写的。

组件模板

<input ngDefaultControl value="value" />

组件代码：

@Component({
  selector: 'cns-text-input',
  templateUrl: './text-input.component.html',
  styleUrls: ['./text-input.component.scss'],
  providers: [ {
    provide: NG_VALUE_ACCESSOR,
    useExisting:  forwardRef(() => TextInputComponent),
    multi: true
  }]
})
export class TextInputComponent implements ControlValueAccessor,     AfterViewInit {

  @ViewChild(DefaultValueAccessor) valueAccessor:     DefaultValueAccessor;

  public ngAfterViewInit() {
    console.log('value accessor', this.valueAccessor);
    console.log(this);
  }

  public writeValue(obj: any): void {
    this.valueAccessor.writeValue(obj);
  }
  public registerOnChange(fn: any): void {
    this.valueAccessor.registerOnChange(fn);
  }
  public registerOnTouched(fn: any): void {
    this.valueAccessor.registerOnTouched(fn);
  }
  public setDisabledState?(isDisabled: boolean): void {
    this.valueAccessor.setDisabledState(isDisabled);
  }

}

模块代码：

@NgModule({
  declarations: [TextInputComponent],
  imports: [FormsModule],
  // exports: [TextInputComponent],
  entryComponents: [TextInputComponent]
})
export class FormModule {
  constructor(private injector: Injector) {
    const textInputElement = createCustomElement(TextInputComponent, { 
      injector 
    });
    customElements.define('cns-text-input', textInputElement);
  }

  ngDoBootstrap() {}
}

用法示例：

// app component html
<form [formGroup]="group">
  <cns-text-input formControlName="text"></cns-text-input>
</form>

// app component

export class AppComponent {
  title = 'web-components-lib-poc';

  public group: FormGroup;

  constructor(private fb: FormBuilder) {
    this.group = this.fb.group({ text: 'my vlaue' });
    this.group.valueChanges.subscribe(val => console.log(val));
  }
}

以上代码导致错误：错误错误：没有名称为 'text'

的表单控件的值访问器

是否有更好的方法来构建此组件，使其表现得更像本机输入？

Answer 1

我找到了答案。在 angular 应用程序中使用非本机输入组件时，ngDefaultControl 将有助于解决值访问器错误。

因此代码将是：

<cns-text-input formControlName="text" ngDefaultControl></cns-text-input>

** 编辑 **

这也适用于其他网络组件，例如 Polymer Elements Paper Input

Angular 元素作为反应形式的原生形式控件

Angular elements as native form control in reactive form

angular

angular-elements