TypeScript - formulario de padre/hijo basado en modelo en Angular2

Soy un novato con Angular2 (beta1) y me gustaría implementar una especie de cuadrícula editable simple, construida con 2 componentes. Aquí utilizo dos componentes de datos falsos para mantener las cosas simples. Ellos son (ver este Plunker: http://plnkr.co/edit/5cZfLTIlhLc82wWV4PQI):

el componente padre, llamado contact. Digamos que representa un contacto con un nombre.
el componente hijo, llamado entry. Digamos que representa una entrada para un contacto, donde cada contacto puede incluir 0 o más entradas. Cada entrada tiene una dirección y un código postal.

Me gustaría crear un formulario donde el usuario pueda editar las propiedades del contacto, y también sus entradas secundarias: podría agregar una nueva entrada, eliminar una entrada existente o editar una entrada existente.

Con este fin, las vistas de ambos componentes proporcionan una plantilla basada en formularios. Puedo pensar en este flujo de datos:

contacto: el usuario edita el formulario y luego hace clic en un botón de enviar para guardar todo. Por lo tanto, solo puedo tener algo de código manejando el botón de enviar y emitiendo un evento como salida del componente. El contacto tiene una propiedad de arreglo entries: así que puedo usar una directiva ngFor en su plantilla para renderizar un componente de entrada para cada uno de ellos.
entrada: la entrada tiene propiedades addressCtl y zipCtl que representan las directivas de control incluidas en el ControlGroup que representa todo el formulario. Además, necesito que un par de propiedades estén vinculadas como la entrada del componente (address y zip), para que en la plantilla del padre pueda hacer algo como:
```
<tr *ngFor="#e of entries">
  <td><my-entry [address]="e.address" [zip]="e.zip"></my-entry></td>
</tr>
```

Ahora, no me queda claro cómo establecer la relación entre las propiedades del "modelo" que representan la entrada del control y las propiedades de las directivas del "formulario". Debería poder obtener los valores de dirección y código postal del componente padre a través de la vinculación [...], y pasar los valores actualizados hacia arriba mediante un evento disparado por el componente hijo (¿por ejemplo, blur?). ¿Tiene sentido esto en el mundo de NG2? De todos modos, me falta una pieza aquí: ¿cómo puedo conectar los valores de los controles del formulario con los valores de las propiedades del modelo? ¿Alguien podría aclararme esto o señalarme alguna buena documentación?

Respuesta #1

De hecho, usar la vinculación [...] solo corresponde a una vinculación unidireccional. Cuando la propiedad del componente padre se actualiza en el componente padre, el valor también se actualiza en el componente hijo.

Pero si quieres actualizar los atributos del padre desde el hijo, necesitas aprovechar los eventos y el atributo @Output.

Aquí hay un ejemplo con un componente 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;
  }
}

De esta manera puedes aprovechar el enlace bidireccional en este componente:

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

Espero que responda a tu pregunta, Thierry

Respuesta #2

Acabo de mover el comentario a la respuesta...

Puedes pasar el objeto e, en lugar de pasar la cadena. es decir

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

entonces en tu componente my-entry, usa ng-model para cada entrada. así obtienes automáticamente enlaces bidireccionales.