Angular 2个模板驱动方式的多输入自定义表单控件

Question

我的领域模型是

vm = { 
  name: 'John Doe', // input in parent form
  account: { // child component with 2 inputs
    acc1: '08', 
    acc2: '6523' 
  } 
};

父表单是模板驱动的，看起来像

<form #form="ngForm" name="form" novalidate (ngSubmit)="submit(form)">
  <label>Name</label>
  <input type="text" name="name" [(ngModel)]="vm.name" />
  <my-child name="account" [(ngModel)]="vm.account"></my-child>
  <button type="submit">Submit</button>
</form>
<pre>form.value={{form.value | json}}</pre>

子组件有 2 个用于 acc1 和 acc2 字段的输入，并且是使用 formGroup、formControlName 指令以模型驱动的方式编写的。

如您在 this plunker 中所见，域模型和子组件之间的双向绑定工作正常。我的意思是 vm.account 中的初始模型值显示在视图中，模型会随着用户在输入字段中键入内容而更新。

我的问题：是否可以使用 ngModel 等以模板驱动的方式编写此子组件，使其在父表单中以相同的方式工作？我不知道如何让子组件将视图更改传播到模型。

编辑：根据接受的答案，上面的 plunker 更新为显示 2 个组件，一个以反应方式，一个以模板驱动方式。

Answer 1

我制作了实际上是嵌套的模板驱动表单。

http://plnkr.co/edit/FUmAshW6NDIp44lVCe2y?p=preview

我对你的plunker做了一些改动，主要改动在这里：

template: `
    <form>
      <label>Account</label>
      <input type="text" name='acc1' [(ngModel)]="accountNumber.acc1"/>
      <input type="text" name='acc2' [(ngModel)]="accountNumber.acc2"/>
    </form>
    <pre>{{accountNumber | json}}</pre>
  `

并且在 ControlValueAccessor 实现中：

  propagateChange = (_: any) => {
  }
  registerOnChange(fn: (value: any) => void) {
     this.propagateChange = fn;
  }

  registerOnTouched() {}

Angular 2个模板驱动方式的多输入自定义表单控件

Angular 2 custom form control with multiple inputs in template-driven way

angular2-forms

angular