基于 Angular2 模型的 parent/children 表单

Question

我是 Angular2 (beta1) 的新手，我想实现一种由 2 个组件构建的简单可编辑网格。在这里，我使用两个假数据组件来保持简单。他们是（见这个 Plunker：http://plnkr.co/edit/5cZfLTIlhLc82wWV4PQI）：

父组件，名为contact。假设它代表一个有名字的联系人。
子组件，名为 entry。假设它代表一个联系人的条目，其中每个联系人可以包含 0 个或多个条目。每个条目都有一个地址和一个邮政编码。

我想创建一个表单，用户可以在其中编辑联系人的属性及其子条目：他可以添加新条目、删除现有条目或编辑现有条目。

为此，这两个组件的视图都提供了一个基于表单的模板。我能想到这个数据流：

contact：用户编辑表单然后点击提交按钮保存整个东西。因此，我可以用一些代码来处理提交按钮并发出一个事件作为组件输出。该联系人有 entries 数组属性：因此我可以在其模板中使用 ngFor 指令来呈现他们每个人的入口组件。
entry：条目具有属性 addressCtl 和 zipCtl 表示 ControlGroup 中包含的控制指令代表整个形式。此外，我需要将几个属性绑定为组件（address 和 zip），以便在父模板中我可以做类似的事情：
```
<tr *ngFor="#e of entries">
  <td><my-entry [address]="e.address" [zip]="e.zip"></my-entry></td>
</tr>
```

现在，我不清楚如何塑造表示控件输入的 "model" 属性与 "form" 指令属性之间的关系。我应该能够通过 [...] 绑定从父组件获取地址和 zip 值，并通过子组件触发的事件向上传递更新的值（例如 blur？）。这在 NG2 世界中有意义吗？无论如何，我在这里遗漏了一块：如何将表单控件值连接到模型属性值？谁能更清楚地说明这一点或指出一些好的文档？

Answer 1

其实使用[...]绑定只对应一种单向绑定。当父组件属性在父组件中更新时，子组件中的值也会更新。

但是如果你想从子更新父属性，你需要利用事件和 @Ouput 属性。

这是一个包含 labels 组件的示例：

export class LabelsComponent implements OnInit {
  @Input()
  labels:string[];

  @Output()
  labelsChange: EventEmitter;

  (...)

  removeLabel(label:string) {
    var index = this.labels.indexOf(label, 0);
    if (index != undefined) {
      this.labels.splice(index, 1);
      this.labelsChange.emit(this.labels);
    }
  }

  addLabel(label:string) {
    this.labels.push(this.labelToAdd);
    this.labelsChange.emit(this.labels);
    this.labelToAdd = '';
    this.addAreaDisplayed = false;
  }
}

这样您就可以在此组件上利用两种方式的绑定：

<labels [(labels)]="company.labels"></labels>

希望它能回答您的问题，蒂埃里

Answer 2

刚把评论移到回答...

您可以传递对象e，而不是传递字符串。即

<my-entry [entry] = "e"></my-entry>

然后在您的 my-entry 组件中，为每个输入使用 ng-model。所以你会自动获得 2 种方式绑定。

基于 Angular2 模型的 parent/children 表单

Angular2 model-based parent/children form

forms

typescript

angular2-forms

angular