首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular 5:“没有ControlContainer提供程序”

Angular 5:“没有ControlContainer提供程序”
EN

Stack Overflow用户
提问于 2018-02-24 11:22:35
回答 12查看 104.9K关注 0票数 81

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

代码语言:javascript
复制
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

这是以前没有发生过的,我也不知道有什么变化。我不知道这条信息想告诉我什么。

这是form-group的组件模板,它似乎是无效的:

代码语言:javascript
复制
<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的模板:

代码语言:javascript
复制
<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,而是我自己的解决方案(因为我认为他们的解决方案被过度设计了,而且它不适合我的特定需求)。会不会有某种名称冲突?当然,在app.module中,我已经导入了FormsModule,以便双向绑定并拦截表单的提交。通知组件至少可以在没有抱怨的情况下工作。

如果有任何帮助,我将非常感激。

编辑:我被要求分享我的TS代码。

故障组件:

代码语言:javascript
复制
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会一直抱怨它没有初始化,尽管在运行时它总是会被初始化)

移交属性的组件:

代码语言:javascript
复制
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关于这个主题的文档相当令人费解。

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48959037

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档