Question

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

波纹管代码在模块中作为角度组件导出时起作用。将其导出为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));
  }
}

上面的代码导致错误：ERROR错误：名称为'text'的表单控件没有值访问器

是否有更好的方法来构造此组件，使其行为更像本机输入？

Answer 1

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

因此代码将是：

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

**编辑**

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

角元素作为反应形式的幼稚形式控制

1 个答案: