Créer des champs de saisie de façon dynamique dans Angular 2

Question

Je travaille sur un projet Angular 4.X et j'essaie de créer des champs de saisie HTML (principalement du type texte) en cliquant sur le bouton. J'utilise des formes réactives angulaires et j'essaie d'y parvenir en utilisant Angular FormArray. J'ai écrit le code sur le plunker mais il montre une erreur.

ci-après le lien pour le Plunk que j'ai créé - http://plnkr.co/edit/PCFD43GK91zo2ivQ9lf7?p=preview

Pour faciliter s'il vous plaît trouver le code ci-dessous -

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

@Component({ 
    selector: 'my-app', 
    template: `<hr> 
       <div> 
       <form [formGroup]="orderForm" (ngSubmit)="OnSubmit(orderForm.value)"> 
        <div> 
        <input type="text" formControlName="customerName"/> 
        <input type="text" formControlName="email"/> 
        </div> 
        <div formArrayName="items" *ngFor="let item of orderForm.get('items').controls; let i = index;"> 
        <div [formGroupName]="i"> 
         <input type="text" formControlName="name" placeholder="Item name"/> 
         <input type="text" formControlName="description" placeholder="Item description"/> 
         <input type="text" formControlName="price" placeholder="Item price"/> 
        </div> 
        Chosen name: {{ orderForm.controls.items.controls[i].controls.name.value }} 
        </div> 
        <button type="submit">Save</button> 
        <button type="button" (click)="addItem()">Add More</button> 
       </form> 
       <div>`, 
}) 

export class App { 

    constructor(private fb: FormBuilder) { } 

    public items:any[]; 
    public orderForm: FormGroup; 



    ngOnInit() { 
     this.orderForm = this.formBuilder.group({ 
     customerName: '', 
     email: '', 
     items: this.formBuilder.array([ this.createItem()]) 
     }); 
    } 

createItem(): FormGroup { 
    return this.formBuilder.group({ 
     name: '', 
     description: '', 
     price: '' 
    }); 
    } 

    addItem(): void { 
    this.items = this.orderForm.get('items') as FormArray; 
    this.items.push(this.createItem()); 
    } 

    public OnSubmit(formValue: any) { 
     console.log(formValue); 
    } 

} 

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

Si quelqu'un peut comprendre ce qui ne va pas avec elle , J'apprécierai hautement cela.

Answer 1

vous avez besoin d'un getter pour vos articles de OrderForm et votre nom de variable pour FormBuilder devrait être « fb » ce que vous avez déclaré dans votre contructor ou « FormBuilder » ce que vous utilisez partout

Fixed plunker

export class App { 

    constructor(private formBuilder: FormBuilder) { } 

    public orderForm: FormGroup; 



    ngOnInit() { 
     this.orderForm = this.formBuilder.group({ 
     customerName: '', 
     email: '', 
     items: this.formBuilder.array([ this.createItem()]) 
     }); 
    } 

createItem(): FormGroup { 
    return this.formBuilder.group({ 
     name: '', 
     description: '', 
     price: '' 
    }); 
    } 

    get items(): FormArray { 
    return this.orderForm.get('items') as FormArray; 
    }; 

    addItem(): void { 
    this.items.push(this.createItem()); 
    } 

    public OnSubmit(formValue: any) { 
     console.log(formValue); 
    } 

} 

code html

<div> 
       <form [formGroup]="orderForm" (ngSubmit)="OnSubmit(orderForm.value)"> 
        <div> 
        <input type="text" formControlName="customerName"/> 
        <input type="text" formControlName="email"/> 
        </div> 
        <div formArrayName="items" *ngFor="let item of items.controls; let i = index;"> 
        <div [formGroupName]="i"> 
         <input type="text" formControlName="name" placeholder="Item name"/> 
         <input type="text" formControlName="description" placeholder="Item description"/> 
         <input type="text" formControlName="price" placeholder="Item price"/> 
        </div> 
        Chosen name: {{ orderForm.controls.items.controls[i].controls.name.value }} 
        </div> 
        <button type="submit">Save</button> 
        <button type="button" (click)="addItem()">Add More</button> 
       </form> 
       <div> 

Answer 2

Vous importez private fb: FormBuilder mais après avoir essayé d'appeler this.formBuilder.something. Changez-le en this.fb.something

Si cela ne fonctionne toujours pas, essayez de mettre votre code de ngOnInit directement à la méthode constructeur.