我有一个使用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
Run Code Online (Sandbox Code Playgroud)
之前没有发生这种情况,我不知道有任何改变.我不知道那条消息试图告诉我什么.
这是form-group的组件模板,似乎无论如何都是无效的:
<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>
Run Code Online (Sandbox Code Playgroud)
这是我使用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>
Run Code Online (Sandbox Code Playgroud)
我盯着它看了几个小时,但我找不到任何错误.
我应该提一下,我不使用Angular的FormGroup,而是使用我自己的解决方案(因为我认为他们的工程过度,并不符合我的特定需求).会不会有某种名字碰撞?当然,在app.module中,我导入了用于双向绑定的FormsModule,并拦截了表单的提交.通知组件至少在没有投诉的情况下工作.
我会非常感谢任何帮助.
编辑: 我被要求分享我的TS代码.
失败的组件:
import { Component, Input } from '@angular/core';
import { FormGroup } from '../../models/form-group';
@Component({ …Run Code Online (Sandbox Code Playgroud) 我尝试测试时出现以下错误 LoginComponent
PhantomJS 2.1.1 (Linux 0.0.0): Executed 3 of 55 (1 FAILED) (0 secs / 0.307 secs)
PhantomJS 2.1.1 (Linux 0.0.0) LoginComponent should create FAILED
Failed: Uncaught (in promise): Error: Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("iv class="col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3">
<form (ngSubmit)="login(f)" [ERROR ->]#f="ngForm">
<div class="card card-login">
<div class="card-header text-cen"): LoginComponent@5:38
Run Code Online (Sandbox Code Playgroud)
我的组件的一部分看起来像,
login.component.ts
export class LoginComponent {
isBusy: boolean = false;
user: User;
constructor(
private router: Router,
private notificationService: NotificationService,
private authService: AuthenticationService, …Run Code Online (Sandbox Code Playgroud) 我已经包括了FormsModule,但它显示了我的错误。
There is no directive with \xe2\x80\x9cexportAs\xe2\x80\x9d set to \xe2\x80\x9cngForm\xe2\x80\x9d \nRun Code Online (Sandbox Code Playgroud)\n\n我的 Login.component.ts :-
\n\nimport { Component } from \'@angular/core\';\nimport { Http, Response , RequestOptions , Headers , URLSearchParams } from \'@angular/http\';\nimport {FormsModule} from \'@angular/forms\';\n\n@Component({\n templateUrl: \'./login.component.html\'\n})\n\nexport class LoginComponent {\n apiRoot : String = "http://httpbin.org";\n // search code starts here\n\n // data = string;\n constructor(private http: Http){\n\n }\n onSubmit(value){\n\n let name = value.name;\n let password = value.password;\n let url = `${this.apiRoot}/post`;\n this.http.post(url, {name:name,password:password}).subscribe(res => console.log(res.json()));\n …Run Code Online (Sandbox Code Playgroud)