Пример угловой реактивной формы 6 не срабатывает на поршне - PullRequest
Новая
       17

Пример угловой реактивной формы 6 не срабатывает на поршне

0 голосов
/ 08 ноября 2018

У меня есть следующий пример угловой 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 {}

И получите следующую ошибку на плункере: 

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

Вот плункер: http://next.plnkr.co/edit/hmUZdqTR8hpxHj0w?open=lib%2Fapp.ts&deferRun=1&preview

Кто-нибудь знает, как это исправить?

1 Ответ

0 голосов
/ 08 ноября 2018

Добавить @Inject декоратор в конструктор класса приложения 

export class App {
  private form:FormArray;

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

  }
  ....
}
...