Les éléments clonés ne peuvent pas être soumis en Angular4

Question

J'ai un modèle avec deux champs for.eg nom et âge, qui doit être cloné et ajouté au même conteneur. J'ai réalisé ceci en utilisant le code suivant.

fichier html

<ng-template #tpl> 
<div class="form-group"> 
<input type="text" id="name" class="form-control" name="name" ngModel 
#name="ngModel"> 
<input type="text" id="age" class="form-control" name="age" ngModel 
#age="ngModel"> 
<button type="Button" >Remove</button> 
</div> 
</ng-template> 
<div>Some element</div> 
<form #myForm="ngForm" novalidate (ngSubmit)="save(myForm)"> 
<div #container> 

</div> 
<button type="submit">Submit</button> 
</form> 
<button (click)="gettemplate()">Add Template</button> 

<pre>{{myForm.value | json}}</pre> 

---

TS déposer

@ViewChild('container', { read: ViewContainerRef }) _vcr; 
@ViewChild('tpl') tpl; 

gettemplate(){ 
    this._vcr.createEmbeddedView(this.tpl); 
} 
save(formvalue:NgForm){ 
    console.log(formvalue.value); 
} 

mais je n'ai pas les valeurs du formulaire après la soumission du formulaire et aussi je dois enlever les éléments clonés sur en cliquant sur le bouton Supprimer .

Answer 1

Ceci est un comportement prévu car tous les ngModel que vous avez définis à l'intérieur ng-template ne font pas partie de <form #myForm="ngForm" car angulaire a un système d'injection de dépendance hiérarchique.

Je peux vous offrir deux options:

1) se déplacent ng-template l'intérieur form tag

<form #myForm="ngForm" novalidate (ngSubmit)="save(myForm)"> 
    <div #container></div> 
    <button type="submit">Submit</button> 
    <ng-template #tpl> 
    <div class="form-group"> 
     <input type="text" id="name" class="form-control" name="name" ngModel 
      #name="ngModel"> 
     <input type="text" id="age" class="form-control" name="age" ngModel 
      #age="ngModel"> 
     <button type="Button" >Remove</button> 
    </div> 
    </ng-template> 
</form> 

Stackblirz example

2) fournir ControlContainer explicity sur votre composant:

import { NgForm, ControlContainer } from '@angular/forms'; 

export function controlContainerFactory(component: AppComponent) { 
    return component.ngForm; 
} 
@Component({ 
    selector: 'my-app', 
    templateUrl: `./app.component.html`, 
    viewProviders: [ 
    { 
     provide: ControlContainer, 
     useFactory: controlContainerFactory, 
     deps: [AppComponent] 
    } 
    ] 
}) 
export class AppComponent { 
    ... 
    @ViewChild('myForm') ngForm: NgForm; 
    ... 
} 

Stackblitz example

Voir aussi

• Angular2 nested template driven form