在使用 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.

注意:这个问题发生在开发模式(即不生产，不使用 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 示例

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