복제 된 요소를 Angular4로 제출할 수 없습니다.

Question

동일한 컨테이너에 복제하고 추가해야하는 이름과 나이 두 개의 필드가있는 템플릿이 있습니다. 다음 코드를 사용하여이 작업을 수행했습니다.

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

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

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

하지만 양식을 제출 한 후 양식 값을하지 않았고, 또한 내가 제거 버튼을 클릭에 복제 된 요소를 제거해야 할 파일 .

Answer 1

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 이동 :

Stackblitz example

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; ... } 

, 나는 첫 번째 옵션을 시도, 또한

• Angular2 nested template driven form