Question

我一直在尝试创建带有角度元素的自定义元素，并且为了表单输入，我正在尝试针对Eliran Eliassy在this文章中讨论的，使用angular的ControlValueAccessor。

但是，当我按照指南操作并完成代码后，我遇到了这个问题。 没有NgControl提供商。我已经将FormsModule和ReactiveFormsModule导入到app.module.ts文件中，这是对此错误的补救方法（正常情况下）。但这一次还没有解决。

StackBlitz Example

会有什么问题？我附上了上面的stackbliz供您参考。

Answer 1

感谢在这里发表文章，以使更多的人从中受益。

您在那里犯了2个错误：

注入NgControl时，您不必提供NG_VALUE_ACCESSOR令牌。原因是NgControl已经提供了NG_VALUE_ACCESSOR令牌，如果您也这样做，则会遇到循环依赖问题。
由于TestComponent是入口组件，因此还必须在注入@Optional()之前添加NgControl装饰器。原因是当您在入口组件中声明一个组件时，即使它不在模板上，也要对它进行工厂角度编译，并且由于它不属于任何形式并且没有任何From指令，因此会出现以下错误No provider for NgControl

希望有帮助！

Answer 2

您的AppModule和DoBootstrap实施有问题。如果您将其删除，并另外从appModule中的entryComponents中删除您的组件，并更改其在app-component.html上的使用方式，一切似乎都可以正常工作。

app.module.ts

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule],
  declarations: [AppComponent, HelloComponent, TestInputComponent],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule  {
  constructor(private injector: Injector) {

  }
}

app.component.html

<form class="form-signin" (ngSubmit)="onSubmit(f.value)" #f="ngForm" >
  <app-test-input [placeholder]="'Email'"
                          [isRequired]="true"
                          [errorMsg]="'Please enter your name'"
                          [label] = "'User Email'"
                          [pattern]="'[A-Za-z0-9._%-]+@[A-Za-z0-9._%-]+\\.[a-z]{2,3}'"
                          ngModel name="email"></app-test-input>

  <button class="btn btn-lg btn-primary btn-block" [disabled]="!f.valid" type="submit">Sign in</button>
</form>

Answer 3

从app.module.ts中删除此行

entryComponents: [TestInputComponent]

您还从app.module.ts中删除了DoBootstrap实现并将ust-input替换为app-test-input，它将起作用。同时删除

providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: TestInputComponent,
      multi: true
    }]

因为它创建了循环依赖。

Answer 4

找到了解决方案。

通过在自定义元素中添加ngDefaultControl作为指令并手动实现ControlValueAccessor的一部分来修复错误。

这里是实现的示例（不要介意验证部分，尚未完成） StackBlitz

请关注这些问题以获取更多信息。

ngModelChange not fired and ngModel doesn't work for custom webcomponents (Angular Element
@angular/elements usage with reactive formControls
Template parse errors: No provider for NgControl when creating custom form elements With Angular Elements

模板解析错误：创建自定义表单元素时没有NgControl提供者

4 个答案: