Angular 5:“没有 ControlContainer 的提供者" [英] Angular 5: "No provider for ControlContainer"

问题描述

我有一个带有 Angular 5 的小网络应用程序，突然间我在浏览器控制台中收到此奇怪的错误消息:

naught 错误:模板解析错误:没有 ControlContainer 的提供者(</p><form class="container";(ngSubmit)="update()">[错误 ->]

以前没有发生过这种情况，我不知道有任何更改.我不知道那条消息想告诉我什么.

这是 form-group 的组件模板，不知何故似乎无效:

<label for="{{e.key}}">{{e.label}}</label><input type="{{e.type}}";name="{{e.key}}";[(ngModel)]=e.value"；类=表单控制"[ngClass]='{is-valid":e.valid === true &&e.required === true}'/>

这是我使用表单组的模板:

<app-form-group-component [formGroup]=additionalInformation"></app-form-group-component><按钮类型=提交"class=btn btn-primary">提交</button></表单><app-notification [notification]="notification"></app-notification>

我盯着它看了几个小时，但我找不到任何错误.

我应该提一下，我不使用 Angular 的 FormGroup，而是使用我自己的解决方案(因为我认为他们的解决方案过度设计并且不符合我的特定需求).会不会发生某种名称冲突?当然，在 app.module 中，我已经导入了 FormsModule 用于双向绑定工作和拦截表单的提交.通知组件至少可以毫无怨言地工作.

如果能得到任何帮助，我将不胜感激.

我被要求分享我的 TS 代码.

失败的组件:

import { Component, Input } from '@angular/core';从'../../models/form-group'导入{FormGroup}；@成分({选择器:'app-form-group-component'，templateUrl: './form-group.component.html',})导出类 FormGroupComponent {@Input() formGroup?: FormGroup}

FormGroup 类型只是一个数组，组件只是一个可视化的包装器.没有涉及额外的服务或 DI，没有该组件 Angular 编译得很好.(formGroup 被标记为可选，因为 TS 会一直抱怨它没有被初始化，尽管在运行时它总是被初始化)

交出财产的组件:

import { Component, OnInit } from "@angular/core";import { additionalInformation } from "./additional-information";import { basicInformation } from "./basic-information";...@成分({选择器:应用启动"，templateUrl: "./kickoff.component.html",})导出类 KickoffComponent 实现 OnInit {基本信息:FormGroup = 基本信息；附加信息:FormGroup =附加信息；方法...}

回答@Andrei 的问题:我没有名为 ControlContainer 的服务或提供程序.我只有三个小服务，它们都不会造成任何麻烦.据我所知，ControlContainer 与 DI 有关系，但 Angular 关于该主题的文档相当神秘.

解决方案

ControlContainer 是一个抽象类，由 ReactiveFormsModuleAbstractFormGroupDirective 扩展/代码>.

如果您使用的是 ReactiveFormsModule 和一个 元素，而没有通过绑定到它的 FormGroup 元素，则会抛出错误[formGroup]=myForm".

要修复此错误，您必须创建一个 FormGroup 并将其绑定到您的表单:

<块引用>

还要确保将 FormsModule 和 ReactiveFormsModule 添加到模块导入中.

I have a little web app with Angular 5 and out of a sudden I am getting this strange error message in my browser console:

ncaught Error: Template parse errors:
No provider for ControlContainer ("
</p>
<form class="container" (ngSubmit)="update()">
  [ERROR ->]<app-form-group-component 
[formGroup]="additionalInformation"></app-form-group-component>
      <button "): ng:///AppModule/KickoffComponent.html@4:2

That did not happen before and I am not aware of any made changes. And I have no idea what that message tries to tell me.

This is the component template of form-group which seems to be invalid somehow:

<div *ngFor='let e of formGroup' class="form-group">
<label for="{{e.key}}">{{e.label}}</label>
<input type="{{e.type}}" name="{{e.key}}" 
[(ngModel)]="e.value" class="form-control" 
[ngClass]='{"is-valid": e.valid === true && e.required === true}'
        />
    </div>

And this is the template where I consume form-group:

<form class="container" (ngSubmit)="update()">
 <app-form-group-component [formGroup]="additionalInformation"></app-form-group-component>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
<app-notification [notification]="notification"></app-notification>

I stared at it for hours, but I can't find any mistake.

I should mention that I don't use Angular's FormGroup but my own solution (because I thought theirs to be overengineered and it didn't fit my specific needs). Could there be some kind of name collision? Of course, in the app.module I have imported the FormsModule for two-way binding to work and to intercept the form's submit. The notification-component at least works without complaints.

I would be very grateful for any help.

Edit: I was asked to share my TS code.

Failing component:

import { Component, Input } from '@angular/core';
import { FormGroup } from '../../models/form-group';

@Component({
  selector: 'app-form-group-component',
  templateUrl: './form-group.component.html',
})
export class FormGroupComponent {
  @Input() formGroup?: FormGroup
}

The type FormGroup is just an Array and the component is just meant to be a visual wrapper. There are no additional services involved or DI and without that component Angular compiles just fine. (formGroup is marked as optional because TS would keep complaining about it not being initialized, although at runtime it will always be initialized)

Component which hands over property:

import { Component, OnInit } from "@angular/core";
import { additionalInformation } from "./additional-information";
import { basicInformation } from "./basic-information";
...

@Component({
  selector: "app-kickoff",
  templateUrl: "./kickoff.component.html",
})
export class KickoffComponent implements OnInit {
  basicInformation: FormGroup = basicInformation;
  additionalInformation: FormGroup = additionalInformation;
  methods...
}

Edit: To answer @Andrei's question: I have no service or provider called ControlContainer. I just have three small services, none of them causes any trouble. As far as I can tell, ControlContainer has something to do with DI, but Angular's documentation on that topic is rather mystifying.

解决方案

The ControlContainer is a abstract class which is extended by the AbstractFormGroupDirective inside the ReactiveFormsModule.

The error is thrown if you're using the ReactiveFormsModule and a <form>-element without a FormGroup bound to it via [formGroup]="myForm".

To fix this error you have to create a FormGroup and bind it to your form:

<form class="container" [formGroup]="myForm" (ngSubmit)="update()">

Also make sure you have both the FormsModule and the ReactiveFormsModule added to your module imports.

这篇关于Angular 5:“没有 ControlContainer 的提供者"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！