Question

我是angular2＆amp;的新手我有一个表单可以向页面添加更多项目（带有name＆amp; decription的项目）。这非常有效，我可以继续在我的列表中添加新项目。

但是，此项目中的每一项都有自己的edit＆amp; delete。我怎样才能edit和delete每个项目只使用1个表单？

<form #formExperiencesRef="ngForm">
    <label for="name">name</label>
    <input id="name" type="text" name="fruit [(ngModel)]="formData.name">

    <label for="description">description</label>
    <input id="description" type="text" name="fruit [(ngModel)]="formData.description">

    <button (click)="onSubmit(formExperiencesRef.value)"></button>
</form>

我使用这个单一形式继续添加新项目。现在我发现很难edit使用它创建的项目。有人能帮助我吗？

Answer 1

通常我会建议使用反应形式来获得所有好处，但如果您的表单很简单，那么模板驱动方法就足够了。

首先，我在您的表单中看到了问题。两个字段的名称属性相同，这意味着它们被评估为同一个。我实际上会将它们命名为formData对象的外观，然后将表单值按原样推送到数组中。为了编辑项目，我只是在这里使用单向绑定。也在submit中传递表单对象。

我们如何编辑可以通过多种方式完成。在这里，我们将使用列表的索引（假设它是一个数组）。

<form #formExperiencesRef="ngForm" (ngSubmit)="onSubmit(formExperiencesRef.value)">
  <input name="name" [ngModel]="formData.name">
  <input name="description" [ngModel]="formData.description">
  <button type="submit">Submit</button>
</form>

您的清单：

<div *ngFor="let item of items; let i = index">
  {{item.name}} <button (click)="edit(item, i)">Edit</button>
</div>

在TS中，我们可以使用@ViewChild来引用我的表单，我用它来重置表单：

@ViewChild('formExperiencesRef') formExperiencesRef: NgForm;

以及编辑和保存新项目的方法：

formData = {};
items = [];
index = null; // used to store current index value of item (if exists)

edit(item, i) {
  this.index = i;
  this.formData = item;
}

onSubmit(val) {
  // check if index exists, if not it's a new item
  if(this.index == null) { 
    this.items.push(val)    
  } else {
    this.items[this.index] = val;
  }
  // reset index & form
  this.index = null;
  this.formExperiencesRef.reset();  
}

DEMO：http://plnkr.co/edit/ksHp10WwaDg4AQjwDf2d?p=preview

对于未来，我建议您查看 reactive forms ，您可以更严格地控制自己的表单，更轻松地处理验证，对我来说尤其如果你有很大的优势处理嵌套组件。反应形式在开始时可能会令人困惑，但它是值得的！：）

如何编辑在Angular2上使用单个表单创建的项目？

1 个答案: