Angular 6反应形式示例在plunker上失败



我有以下角度6的例子:

//our root app component
import { Component, NgModule, VERSION, Injectable } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule, FormArray, FormBuilder } from '@angular/forms';

@Component({
selector: 'my-app',
template: `<form [formGroup]="form" novalidate="">
<div style="margin-bottom:80px">
<div *ngFor="let item of form.controls; let idx=index" [formGroupName]="idx">
<div *ngIf='item.controls.type.value == "control"'>
<div>Input</div>
<input name="answer" type="text" placeholder="Reponse" formControlName="answer"/>
</div>
<div *ngIf='item.controls.type.value == "group"' formGroupName="answer">
<div>Checkboxes</div>
<div *ngFor='let ctrl of item.controls.answer.controls; let index=index'>
<input name="answer" type="checkbox" placeholder="Reponse" [formControlName]="index"/>
</div>
</div>
</div>
</div>
<button type="button" (click)="changeTemplate()">New template</button>
</form>`
})
export class App {
private form:FormArray;
constructor(private formBuilder:FormBuilder){
}

changeTemplate(){
this.form = this.formBuilder.array([
this.formBuilder.group({
answer:[''],
type:['control']
}),
this.formBuilder.group({
answer:this.formBuilder.array([[''], [''], ['']]),
type:['group']
}),
this.formBuilder.group({
answer:[''],
type:['control']
})
]);

}
ngOnInit(){
this.form = this.formBuilder.array([
this.formBuilder.group({
answer:this.formBuilder.array([[''], [''], ['']]),
type:['group']
}),
this.formBuilder.group({
answer:[''],
type:['control']
}),
this.formBuilder.group({
answer:this.formBuilder.array([[''], [''], ['']]),
type:['group']
})
]);

}
}
@NgModule({
imports: [BrowserModule, ReactiveFormsModule],
declarations: [App],
bootstrap: [App],
})
export class AppModule {}

在plunker上得到以下错误:

Can't resolve all parameters for App: (?).

以下是plunker:http://next.plnkr.co/edit/hmUZdqTR8hpxHj0w?open=lib%2Fapp.ts&deferRun=1&预览

有人知道怎么解决这个问题吗?

在应用程序类构造函数中添加@Inject装饰器

export class App {
private form:FormArray;
constructor(@Inject(FormBuilder) private formBuilder: FormBuilder){
}
....
}

最新更新