Usando Angular 2, el enlace bidireccional es fácil en formularios basados en plantillas: solo usa la sintaxis de la caja de banana. ¿Cómo replicaría este comportamiento en forma de modelo?

Por ejemplo, aquí hay una forma reactiva estándar. Supongamos que es mucho más complicado de lo que parece, con muchísimas entradas y lógica de negocios, y por lo tanto más apropiado para un enfoque basado en modelos que para un enfoque basado en plantillas.

export class ExampleModel {
    public name: string;
    // ... lots of other inputs
}

@Component({
    template: `
        <form [formGroup]="form">
            <input type="text" formControlName="name">
            ... lots of other inputs
        </form>

        <h4>Example values: {{example | json}}</h4>
    `
})
export class ExampleComponent {
    public form: FormGroup;
    public example: ExampleModel = new ExampleModel();

    constructor(private _fb: FormBuilder) {
        this.form = this._fb.group({
            name: [ this.example.name, Validators.required ]
            // lots of other inputs
        });
    }

    this.form.valueChanges.subscribe({
        form => {
            console.info('form values', form);
        }
    });
}

En elsubscribe() Puedo aplicar todo tipo de lógica a los valores del formulario y asignarlos según sea necesario. Sin embargo, no quiero asignar todos los valores de entrada del formulario. Solo quiero ver los valores para todoemployee modelo a medida que se actualiza, en un enfoque similar a[(ngModel)]="example.name", y como se muestra en la tubería json en la plantilla. ¿Cómo puedo lograr esto?