代码之家 › 专栏 › 技术社区 › Dave Nottage

使用Angular 4.4.6在开发模式下没有提供NgForm错误

angular-forms typescript angular

Dave Nottage · 技术社区 · 7 年前

我发现了问题的根源;我现在正在寻找一个解决方案,如何迎合它。

注释 :此问题在开发模式下发生(即不使用prod,也不使用aot)

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

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

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

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没有提供程序。

在没有表单的情况下,是否有某种方式可以动态使用viewProviders成员?

1 回复 | 直到 7 年前

yurzui 7 年前

null 如果没有家长 NgForm 供应商:

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

...

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

Stackblitz example