使用Angular 4.4.6在开发人员模式下没有提供NgForm错误的提供程序 [英] No provider for NgForm error in dev mode using Angular 4.4.6

问题描述

编辑:我发现了导致问题的原因；我现在正在寻找一种解决方案，以适应这种情况.

I've discovered what is causing the problem; I'm now looking for a solution as to how to cater for it.

注意:此问题是在开发人员模式下发生的(即不是prod，并且未使用aot)

NOTE: This issue is happening in dev mode (i.e. not prod, and not using aot)

我在这里使用更新"解决方案:

I'm using the "Update" solution from here:

https://stackoverflow.com/a/46324043/3164070

解决子组件中的输入未更新表单上的有效标志的问题.它可以在一个相当简单的测试项目中工作，但是当将其移至我们的真实项目时，会引发以下错误:

To solve an issue with an input in a child component that was not updating the valid flag on the form. It works in a fairly simple test project, however when moving it to our real project, it throws this error:

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: No provider for NgForm!
Error: No provider for NgForm!
    at ZoneAwareError (http://192.168.2.34:4200/vendor.bundle.js:153804:33)
    at injectionError (http://192.168.2.34:4200/vendor.bundle.js:1378:90)
    at noProviderError (http://192.168.2.34:4200/vendor.bundle.js:1416:12)
    at ReflectiveInjector_._throwOrNull (http://192.168.2.34:4200/vendor.bundle.js:2858:19)
    at ReflectiveInjector_._getByKeyDefault (http://192.168.2.34:4200/vendor.bundle.js:2897:25)
    at ReflectiveInjector_._getByKey (http://192.168.2.34:4200/vendor.bundle.js:2829:25)
    at ReflectiveInjector_.get (http://192.168.2.34:4200/vendor.bundle.js:2698:21)
    at resolveNgModuleDep (http://192.168.2.34:4200/vendor.bundle.js:9701:25)
    at NgModuleRef_.get (http://192.168.2.34:4200/vendor.bundle.js:10771:16)
    at resolveDep (http://192.168.2.34:4200/vendor.bundle.js:11259:45)
    at _createProviderInstance (http://192.168.2.34:4200/vendor.bundle.js:11102:20)
    at resolveDep (http://192.168.2.34:4200/vendor.bundle.js:11238:56)
    at createClass (http://192.168.2.34:4200/vendor.bundle.js:11129:32)
    at createDirectiveInstance (http://192.168.2.34:4200/vendor.bundle.js:10960:37)
    at createViewNodes (http://192.168.2.34:4200/vendor.bundle.js:12401:53)
    at ZoneAwareError (http://192.168.2.34:4200/vendor.bundle.js:153804:33)
    at injectionError (http://192.168.2.34:4200/vendor.bundle.js:1378:90)
    at noProviderError (http://192.168.2.34:4200/vendor.bundle.js:1416:12)
    at ReflectiveInjector_._throwOrNull (http://192.168.2.34:4200/vendor.bundle.js:2858:19)
    at ReflectiveInjector_._getByKeyDefault (http://192.168.2.34:4200/vendor.bundle.js:2897:25)
    at ReflectiveInjector_._getByKey (http://192.168.2.34:4200/vendor.bundle.js:2829:25)
    at ReflectiveInjector_.get (http://192.168.2.34:4200/vendor.bundle.js:2698:21)
    at resolveNgModuleDep (http://192.168.2.34:4200/vendor.bundle.js:9701:25)
    at NgModuleRef_.get (http://192.168.2.34:4200/vendor.bundle.js:10771:16)
    at resolveDep (http://192.168.2.34:4200/vendor.bundle.js:11259:45)
    at _createProviderInstance (http://192.168.2.34:4200/vendor.bundle.js:11102:20)
    at resolveDep (http://192.168.2.34:4200/vendor.bundle.js:11238:56)
    at createClass (http://192.168.2.34:4200/vendor.bundle.js:11129:32)
    at createDirectiveInstance (http://192.168.2.34:4200/vendor.bundle.js:10960:37)
    at createViewNodes (http://192.168.2.34:4200/vendor.bundle.js:12401:53)
    at resolvePromise (http://192.168.2.34:4200/vendor.bundle.js:153599:31) [angular]
    at resolvePromise (http://192.168.2.34:4200/vendor.bundle.js:153570:17) [angular]
    at http://192.168.2.34:4200/vendor.bundle.js:153647:17 [angular]
    at Object.onInvokeTask (http://192.168.2.34:4200/vendor.bundle.js:4090:33) [angular]
    at ZoneDelegate.invokeTask (http://192.168.2.34:4200/vendor.bundle.js:153284:36) [angular]
    at Zone.runTask (http://192.168.2.34:4200/vendor.bundle.js:153052:47) [<root> => angular]
    at drainMicroTaskQueue (http://192.168.2.34:4200/vendor.bundle.js:153480:35) [<root>]
    at <anonymous> [<root>]

问题在于可以在不使用表单的情况下使用相同的组件，因此没有NgForm的提供程序.

The problem is that the same component can be used without being on a form, so there is no provider for NgForm.

在没有表单的情况下，是否存在某种动态使用viewProviders成员的方法?

Is there some way of using the viewProviders member dynamically in the case where there is no form?

推荐答案

是的，如果没有父NgForm提供者，则可以将其作为null提供:

Yeah, you can provide it as null in case if there is no parent NgForm provider:

export function controlContainerFactory(controlContainer?: ControlContainer) {
  return controlContainer;
}

...

viewProviders: [ 
  { 
    provide: ControlContainer, 
    useFactory: controlContainerFactory, 
    deps: [[new Optional(), NgForm]] 
             ^^^^^^^^^^
          should do the trick
  } 
]

Stackblitz示例

Stackblitz example

这篇关于使用Angular 4.4.6在开发人员模式下没有提供NgForm错误的提供程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！