クローンされた要素をAngular4で提出することはできません

名前と年齢の2つのフィールドがあり、同じコンテナにクローンして追加する必要があるテンプレートがあります。私は次のコードを使ってこれを達成しました。クローンされた要素をAngular4で提出することはできません

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>

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

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

が、私は、フォームを提出した後、フォームの値を取得していないとも私はボタンを外しクリックでクローン化された要素を削除する必要があるファイル。

出典

2017-10-20 devipriya

ng-templateの中で定義したすべてのngModelは、角度が階層依存注入システムであるため、<form #myForm="ngForm"の一部ではないため、これは意図した動作です。

私はここであなたに二つの選択肢を提供することができます：

は

1）あなたのコンポーネントにControlContainer明示的に提供formタグ

<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）内ng-templateを移動：

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

も参照してください