原始例外：FormGroup 没有提供程序

Question

我有一个简单的表单，可以显示错误消息

errorm-messages.component

import { Component, OnInit, Input } from '@angular/core'
import { NgIf } from '@angular/common'
import {REACTIVE_FORM_DIRECTIVES, FormGroup } from '@angular/forms'

@Component(
    {
      moduleId: module.id,
      selector: 'epimss-error-messages',
      template: `
   <span class="error" *ngIf="errorMessage !== null">{{errorMessage}}</span>`,
      styles: [],
      directives: [REACTIVE_FORM_DIRECTIVES, NgIf]

    })
export class ErrorMessagesComponent implements OnInit {
  @Input()
  ctrlName: string

  constructor(private _form: FormGroup) {
  }

  ngOnInit() {
      }

  get errorMessage() {
    // Find the control in the Host (Parent) form
    let ctrl = this._form.find(this.ctrlName);

    console.log('ctrl| ', ctrl)

//    for (let propertyName of ctrl.errors) {
//      // If control has a error
//      if (ctrl.errors.hasOwnProperty(propertyName) && ctrl.touched) {
//        // Return the appropriate error message from the Validation Service
//        return CustomValidators.getValidatorErrorMessage(propertyName);
//      }
//    }

    return null;
  }

}

用法

导入后的 language.component.html 作为 language.component.ts 中的指令

<div layout = "column"
     layout-align = "start start">
  <md-input required
            placeholder = "First"
            formControlName = "first"></md-input>
  <epimss-error-messages ctrlName = "first"></epimss-error-messages>
  <md-input placeholder = "Second"
            formControlName = "second"></md-input>
  <!--<epimss-error-messages ctrlName = "second"></epimss-error-messages>-->

</div>

一旦线

<epimss-error-messages ctrlName = "first"></epimss-error-messages>

存在我收到以下控制台错误并且 UI 无法显示：

例外：错误在http://localhost:4200/app/registration/language/language.component.html:44:2 browser_adapter.ts:74 例外：错误在 http://localhost:4200/app/registration/language/ 中的错误language.component.html:44:2BrowserDomAdapter.logError @ browser_adapter.ts:74BrowserDomAdapter.logGroup @ browser_adapter.ts:85ExceptionHandler.call @exception_handler.ts:50(匿名函数) @ application_ref.ts:396ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone64ZoneDele .js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ng_zone_impl.ts:96NgZone.run @ng_zone.ts:211ApplicationRef_.run @application_ref.ts:384ApplicationRef_.bootstrap @application_ref.ts:408) @anony application .ts:150ZoneDelegate.invoke @ zone.js:323onInvoke @ng_zone_impl.ts:64ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(匿名函数) @ zone.js:571ZoneDelegate.invokeTask @zone :356onInvokeTask @ ng_zone_impl.ts:53ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone。js:426 browser_adapter.ts:74 ORIGINAL EXCEPTION: 没有提供 FormGroup!BrowserDomAdapter.logError @ browser_adapter.ts:74ExceptionHandler.call @ exception_handler.ts:62(anonymous function) @ application_ref.ts:396ZoneDelegate.invoke @ 323onInvoke @ ng_zone_impl.ts:64ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ ng_zone_impl.ts:96NgZone.run @ ng_zone.ts:211ApplicationRef3_rapts @ Ref3_Rap_. application_ref.ts:408(匿名函数)@application_ref.ts:150ZoneDelegate.invoke@zone.js:323onInvoke@ng_zone_impl.ts:64ZoneDelegate.invoke@zone.js:322Zone.run@zone.js:216(匿名函数) zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.ts:53ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js：256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426 browser_adapter.ts:74 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:74ExceptionHandler.call @exception_handler.ts:66(anonymous.6tones:66(anonymous.6tones) @application .invoke @zone.js:323onInvoke @ng_zone_impl.ts:64ZoneDelegate.invoke @zone.js:322Zone.run @zone.js:216NgZoneImpl.runInner @ng_zone_impl.ts:96NgZone.run @ng_zone_impl.ts:64ZoneDelegate.invoke @zone.js:322Zone.run .ts:384ApplicationRef_.bootstrap @ application_ref.ts:408(匿名函数) @ application_ref.ts:150ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:64ZoneDelegate.invoke @ zone.js:322.Zone :216(匿名函数)@zone.js:571ZoneDelegate.invokeTask@zone.js:356onInvokeTask@ng_zone_impl.ts:53ZoneDelegate.invokeTask@zone。js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426 browser_adapter.ts:74 错误：NoProviderError.BaseException 处的 DI 异常 [作为构造函数] (exceptions.ts:13) 在NoProviderError.AbstractProviderError [作为构造函数] (reflective_exceptions.ts:51) at new NoProviderError (reflective_exceptions.ts:84) at ReflectiveInjector_._throwOrNull (reflective_injector.ts:839) at ReflectiveInjector_._getByKeyjectDefault (.reflective_exceptions.ts:84) at ReflectiveInjector_._getByKeyjectDefault (.reflective_exceptions.ts:84) (reflective_injector.ts:830) at ReflectiveInjector_.get (reflective_injector.ts:623) at ElementInjector.get (element_injector.ts:15) at ElementInjector.get (element_injector.ts:15) at _View_LanguageComponent0。createInternal (LanguageComponent.template.js:217)BrowserDomAdapter.logError@browser_adapter.ts:74ExceptionHandler.call @exception_handler.ts:67(匿名函数)@application_ref.ts:396ZoneDelegate.invoke@zone.js:323onInzone_impl.ng_impl 64ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ ng_zone_impl.ts:96NgZone.run @ ng_zone.ts:211ApplicationRef_.run @ application_ref.ts:384ApplicationRef_.bootstraps(@匿名函数) @ application_ref.ts:150ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:64ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(匿名函数) @ zone.js:571ZoneDelegate invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.ts:53ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js：474ZoneTask.invoke @ zone.js:426 browser_adapter.ts:74 ERROR CONTEXT:BrowserDomAdapter.logError @ browser_adapter.ts:74ExceptionHandler.call @ exception_handler.ts:71（匿名函数）@ application_ref.ts:396ZoneDelegate.in。 :323onInvoke @ ng_zone_impl.ts:64ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ ng_zone_impl.ts:96NgZone.run @ ng_zone.ts:211ApplicationRef3.raps:211ApplicationRef. @ application_ref.ts:408(匿名函数) @application_ref.ts:150ZoneDelegate.invoke @zone.js:323onInvoke @ng_zone_impl.ts:64ZoneDelegate.invoke @zone.js:322Zone.run @zone.js:216(匿名函数) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ng_zone_impl.ts:53ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js：256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426 browser_adapter.ts:74 DebugContext {_view: _View_LanguageComponent0, _nodeIndex: 30, _tplRow: 44, _tplCol: 2}Browser.Domcalls_Handler@7p4logHandlerException exception_handler.ts:72(匿名函数)@application_ref.ts:396ZoneDelegate.invoke@zone.js:323onInvoke@ng_zone_impl.ts:64ZoneDelegate.invoke@zone.js:322Zone.run @zone.js:216NgZone_impl. ts:96NgZone.run @ng_zone.ts:211ApplicationRef_.run @application_ref.ts:384ApplicationRef_.bootstrap @application_ref.ts:408（匿名函数）@application_ref.ts:150ZoneDelegate.invoke @zone.js:323ong_imple_invoke 64ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(匿名函数) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.ts:53ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426 browser_adapter.ts: 84 异常：错误http://localhost:4200/app/registration/language/language.component.html:44:2 ...

删除上面的最后一个代码，显示如预期。

希望有人能帮忙。

谢谢

Answer 1

不需要注入FormGroup，只需将其作为一个类，直接实例化即可。

所以你的构造函数应该只是

constructor() {
    this._form = new FormGroup({
        first: new FormControl('value')
    })
}