无法在 Angular4 中提交克隆元素 [英] Cloned elements cannot be submitted in Angular4

问题描述

我有一个包含两个字段的模板，例如姓名和年龄，需要克隆并附加到同一个容器.我使用以下代码实现了这一点.

html 文件

<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>

</ng-模板><div>某些元素</div><form #myForm="ngForm" novalidate (ngSubmit)="save(myForm)"><div #container>

<button type="submit">提交</button></表单><button (click)="gettemplate()">添加模板</button><pre>{{myForm.value |json}}</pre>

<小时>

TS 文件

@ViewChild('container', { read: ViewContainerRef }) _vcr;@ViewChild('tpl') tpl;获取模板(){this._vcr.createEmbeddedView(this.tpl);}保存(表单值:NgForm){控制台日志(表单值.值)；}

但是我在提交表单后没有获得表单值，而且我还需要在单击删除"按钮时删除克隆的元素.

解决方案

这是预期行为，因为您在 ng-template 中定义的所有 ngModel 都不是 <form #myForm= 的一部分"ngForm" 因为 angular 有分层依赖注入系统.

我可以在这里为您提供两种选择:

1) 将 ng-template 移动到 form 标签内

<div #container></div><button type="submit">提交</button><ng-模板#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>

</ng-模板></表单>

Stackblirz 示例

2) 在您的组件上明确提供 ControlContainer:

import { NgForm, ControlContainer } from '@angular/forms';导出函数 controlContainerFactory(component: AppComponent) {返回 component.ngForm;}@成分({选择器:'我的应用'，模板网址:`./app.component.html`，视图提供者:[{提供:ControlContainer，使用工厂:控制容器工厂，依赖:[AppComponent]}]})导出类 AppComponent {...@ViewChild('myForm') ngForm: NgForm;...}

Stackblitz 示例

另见

• Angular2 嵌套模板驱动表单

I have a template with two fields for.eg name and age, that needs to cloned and appended to the same container. I achieved this using the following code.

html file

<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 file

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

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

but I did not get the form values after submitting the form and also I need to remove the cloned elements on clicking Remove button.

解决方案

This is intended behavior because all ngModel's you defined inside ng-template are not part of <form #myForm="ngForm" since angular has hierarchical dependency injection system.

I can offer you two options here:

1) move ng-template inside 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) provide ControlContainer explicity on your component:

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

See also

• Angular2 nested template driven form

这篇关于无法在 Angular4 中提交克隆元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！