Γωνιακή 6 αντιδραστική μορφή παραδείγματος αποτυγχάνει σε plunker

ψήφοι
0

Έχω το ακόλουθο παράδειγμα της γωνιακής 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

Ξέρει κανείς πώς να το διορθώσω αυτό;

Δημοσιεύθηκε 08/11/2018 στις 00:07
πηγή χρήστη
Σε άλλες γλώσσες...                            


1 απαντήσεις

ψήφοι
1

Προσθέστε @Injectδιακοσμητής στο App κατασκευαστή τάξη

export class App {
  private form:FormArray;

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

  }
  ....
}
Απαντήθηκε 08/11/2018 στις 01:20
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more