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

有谁知道如何解决这一问题?

苏尼尔·辛格

@Inject在 App 类构造函数中添加装饰器

export class App {
  private form:FormArray;

  constructor(@Inject(FormBuilder) private formBuilder: FormBuilder){

  }
  ....
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

plunker Angular Js的预览错误

来自分类Dev

angular 6 材料设计反应形式重用输入组件

来自分类Dev

AngularJS未在Plunker上加载

来自分类Dev

给定以下Plunker上的Leaflet.Draw示例,我如何捕捉矩形创建的事件和动作?

来自分类Dev

angular.js:在$ injector:modulerr上使用正确的代码示例,在$ injector:modulerr上$ sanitize失败

来自分类Dev

无法读取 angular6 反应形式中未定义的属性“触摸”

来自分类Dev

Angular反应形式模板

来自分类Dev

Angular 2在Plunker中没有RouterOutletMap的提供程序

来自分类Dev

Angular2项目到Plunker

来自分类Dev

我的Angular代码在Plunker中不起作用

来自分类Dev

在Plunker中为Angular运行时遇到问题

来自分类Dev

AngularJS简单示例在Plunker中不起作用

来自分类Dev

AngularJS简单示例在Plunker中不起作用

来自分类Dev

初始 FormGroup 失败后,Angular 7 反应形式 patchValue 为 null

来自分类Dev

尝试在Plunker上渲染React-Bootstrap模态

来自分类Dev

在 d3-plunker 上渲染 d3-timeseries

来自分类Dev

Angular 6反应形式-如何根据另一输入的选择填充一个文本字段

来自分类Dev

Angular6-反应形式-使用对象和[selected]绑定时无法以编程方式设置选择选项

来自分类Dev

嵌套反应形式(Angular 5)

来自分类Dev

Angular反应形式,不会在传入数据上生成复选框

来自分类Dev

RHEL 6 Cgroup上的Docker安装失败

来自分类Dev

Angular Latest的部署在GitHubPages上失败

来自分类Dev

无法在Plunker编辑器中添加Angular.js脚本

来自分类Dev

Angular2应用程序不会在Plunker中加载

来自分类Dev

每个NIC上多个VLAN在IPv6上失败

来自分类Dev

Chrome nativeMessaging 示例在 Windows 上失败

来自分类Dev

在Angular的反应形式中输入Type =“ Range”

来自分类Dev

如何从Angular反应形式中删除字段?

来自分类Dev

子组件中的Angular反应形式提交

Related 相关文章

  1. 1

    plunker Angular Js的预览错误

  2. 2

    angular 6 材料设计反应形式重用输入组件

  3. 3

    AngularJS未在Plunker上加载

  4. 4

    给定以下Plunker上的Leaflet.Draw示例,我如何捕捉矩形创建的事件和动作?

  5. 5

    angular.js:在$ injector:modulerr上使用正确的代码示例,在$ injector:modulerr上$ sanitize失败

  6. 6

    无法读取 angular6 反应形式中未定义的属性“触摸”

  7. 7

    Angular反应形式模板

  8. 8

    Angular 2在Plunker中没有RouterOutletMap的提供程序

  9. 9

    Angular2项目到Plunker

  10. 10

    我的Angular代码在Plunker中不起作用

  11. 11

    在Plunker中为Angular运行时遇到问题

  12. 12

    AngularJS简单示例在Plunker中不起作用

  13. 13

    AngularJS简单示例在Plunker中不起作用

  14. 14

    初始 FormGroup 失败后,Angular 7 反应形式 patchValue 为 null

  15. 15

    尝试在Plunker上渲染React-Bootstrap模态

  16. 16

    在 d3-plunker 上渲染 d3-timeseries

  17. 17

    Angular 6反应形式-如何根据另一输入的选择填充一个文本字段

  18. 18

    Angular6-反应形式-使用对象和[selected]绑定时无法以编程方式设置选择选项

  19. 19

    嵌套反应形式(Angular 5)

  20. 20

    Angular反应形式,不会在传入数据上生成复选框

  21. 21

    RHEL 6 Cgroup上的Docker安装失败

  22. 22

    Angular Latest的部署在GitHubPages上失败

  23. 23

    无法在Plunker编辑器中添加Angular.js脚本

  24. 24

    Angular2应用程序不会在Plunker中加载

  25. 25

    每个NIC上多个VLAN在IPv6上失败

  26. 26

    Chrome nativeMessaging 示例在 Windows 上失败

  27. 27

    在Angular的反应形式中输入Type =“ Range”

  28. 28

    如何从Angular反应形式中删除字段?

  29. 29

    子组件中的Angular反应形式提交

热门标签

归档