角度5:“没有为ControlContainer提供程序" [英] Angular 5: "No provider for ControlContainer"

问题描述

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

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.

这是form-group的组件模板，该模板似乎以某种方式无效:

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>

这是我使用form-group的模板:

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.

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

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 greatful for any help.

修改: 我被要求分享我的TS代码.

I was asked to share my TS code.

失败组件:

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
}

FormGroup 类型只是一个数组，而该组件仅是可视包装器. 没有涉及其他服务或DI，并且没有该组件，Angular编译就很好. ( formGroup 被标记为可选，因为TS会一直抱怨它未被初始化，尽管在运行时它将始终被初始化)

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)

移交属性的组件:

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...
}

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

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.

推荐答案

ControlContainer是一个抽象类，由ReactiveFormsModule内部的AbstractFormGroupDirective扩展.

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

如果您使用ReactiveFormsModule和<form>元素且没有通过[formGroup]="myForm"绑定FormGroup的元素，则会引发错误.

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

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

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

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

还要确保在模块导入中同时添加了FormsModule和ReactiveFormsModule.

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