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.ts 中的指令导入后，

language.component.html

<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 EXCEPTION：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_zone_impl.ts: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_.bootstrap @ 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 EXCEPTION：没有FormGroup的提供者！BrowserDomAdapter.logError @ browser_adapter.ts:74ExceptionHandler.call @ exception_handler.ts：62（匿名函数）@ application_ref.ts：396ZoneDelegate.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.ts：211ApplicationRef_.run @ application_ref.ts：384ApplicationRef_.bootstrap @ 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（匿名函数）@ application_ref.ts：396ZoneDelegate.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.ts：211ApplicationRef_.run @ application_ref.ts：384ApplicationRef_.bootstrap @ 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错误：DI异常在NoProviderError.BaseException [作为构造函数]（exceptions.ts：13）在NoProviderError.AbstractProviderError [作为构造函数]（reflective_exceptions.ts:51）在新的NoProviderError（reflective_exceptions.ts：84）在ReflectiveInjector _._ throwOrNull（reflective_injector.ts：839）在ReflectiveInjector _._ getByKeyDefault（reflective_injector.ts：868）在ReflectiveInjector _._ getByKey（reflective_injector.ts：830）在ReflectiveInjector_.get（reflective_injector.ts：623）在ElementInjector.get（element_injector.ts:15）在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：323onInvoke @ ng_zone_impl.ts: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_.bootstrap @ 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错误上下文：BrowserDomAdapter.logError @ browser_adapter.ts:74ExceptionHandler.call @ exception_handler.ts：71（匿名函数）@ application_ref.ts：396ZoneDelegate.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.ts：211ApplicationRef_.run @ application_ref.ts：384ApplicationRef_.bootstrap @ 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} BrowserDomAdapter.logError @ browser_adapter.ts:74ExceptionHandler.call @ exception_handler.ts：72（匿名函数）@ application_ref.ts：396ZoneDelegate.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.ts：211ApplicationRef_.run @ application_ref.ts：384ApplicationRef_.bootstrap @ 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:84 EXCEPTION：http://localhost:4200/app/registration/language/language.component.html:44:2出错 ...

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

希望有人可以提供帮助。

由于

Answer 1

您不需要注入FormGroup，只需将其用作类并直接实例化。

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

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

原始例外：FormGroup

errorm-messages.component

1 个答案: