Клонированные элементы не могут быть отправлены в Angular4

У меня есть шаблон с двумя полями для имени и возраста .eg, которые необходимо клонировать и добавить в один и тот же контейнер. Я достиг этого, используя следующий код.

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

но я не получил значения формы после отправки формы, а также мне нужно удалить клонированные элементы при нажатии кнопки «Удалить».


angular angular2-template clonenode
person devipriya    schedule 20.10.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Это предполагаемое поведение, потому что все ngModel, которые вы определили внутри ng-template, не являются частью <form #myForm="ngForm", поскольку angular имеет иерархическую систему внедрения зависимостей.

Здесь я могу предложить вам два варианта:

1) переместите ng-template внутрь тега 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

2) укажите ControlContainer в вашем компоненте:

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

Смотрите также

person yurzui    schedule 21.10.2017
comment
Спасибо, Юрзуи, попробовал первый вариант, работает хорошо и очень просто. Одно обновление, чтобы получить несколько значений полей «Имя» и «Возраст», я добавил динамический идентификатор в каждое поле, как показано ниже, <ng-template #tpl **let-context="context"**> <input type="text" id="name**{{context.session}}**" class="form-control" name="name**{{context.session}}**" ngModel #name**{{context.session}}**="ngModel"> <input type="text" id="age**{{context.session}}**" class="form-control" name="age**{{context.session}}**" ngModel #age**{{context.session}}**="ngModel"> - person devipriya; 23.10.2017
comment
И в чем проблема? - person yurzui; 23.10.2017
comment
в этом нет проблем, я просто добавил значение сеанса к идентификатору элемента, чтобы получить каждый набор значений элементов при отправке формы - person devipriya; 24.10.2017
comment
@yurzui, не могли бы вы изложить свое предложение по этому поводу with/51156211#51156211" title="отправка угловой формы не срабатывает при нажатии кнопки отправки с помощью"> stackoverflow.com/questions/51156152/ - person Ammar Khan; 03.07.2018