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

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

这以前没有发生过,我也不知道有任何变化.我不知道那条信息想告诉我什么.

这是表单组的组件模板,它似乎以某种方式无效:

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

我盯着它看了几个小时,但没有发现任何错误.

我应该提到的是,我没有使用Angular的FormGroup,而是使用我自己的解决方案(因为我认为他们的解决方案设计过度,不符合我的具体需求).会不会有名字冲突?当然,在应用程序中.模块I已导入FormsModule,用于双向绑定以工作并拦截表单的提交.

如果有任何帮助,我将不胜感激.

Edit:个 我被要求分享我的TS代码.

故障组件:

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,没有该组件ANGING编译就可以很好地完成. (formGroup标记为可选,因为TS会一直抱怨它没有初始化,尽管在运行时它总是会被初始化)

移交财产的组成部分:

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:回答@Andrei的问题:我没有名为ControlContainer的服务或Provider .我只有三个小服务,没有一个会带来任何麻烦.据我所知,ControlContainer与DI有关,但Angular关于该主题的文档相当神秘.

推荐答案

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

如果使用的是ReactiveFormsModule<form>元素,而没有通过[formGroup]="myForm"绑定FormGroup,则会抛出错误.

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

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

还要确保模块导入中同时添加了FormsModuleReactiveFormsModule.

Angular相关问答推荐

Angular:浏览器中未显示一些Google Content图标

如何在HTML外部项目中使用Web组件(以17角创建)

有没有其他代码可以用函数的方式写成Angular ?

为什么在回调完成之前,可观察对象会返回?

Angular KendoGrid RowReorderable,drop不适用于新添加的行

我正在try 将一个带有模块联盟的Angular 8项目expose 到另一个Angular 项目,Angular 是15,这可能吗?如果是这样,有什么建议吗?

带独立零部件的TranslateLoader[Angular 16]

ION标签-从子对象中加载页,保留父对象的S内容

阶段JS画布覆盖 bootstrap 模式

RXJS拆分返回值,多次调用后重新加入

Angular 迁移 14 到 15 / 16:angular universal 是否停止将 <!-- this page was prerendered with angular universal --> 用于预渲染页面?

完成行为主体

有没有办法订阅部分 BehaviorSubject 值的变化?

MatTooltip 显示在 html 原生对话框下方

多个 Mat Paginator 在 Angular 组件中不起作用

无法卸载 angular-cli

如何处理解析器中的错误

如何在 Angular 6 中使用 mouseover 和 mouseout

Angular 2 中的动态模板 URL

Firebase 查询子项的子项是否包含值