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>

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

正如您在this plunker中所看到的，域模型和子组件之间的双向绑定正常。我的意思是vm.account中的初始模型值显示在视图中，模型在输入字段中作为用户类型更新。

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

修改：根据已接受的答案，上面的plunker更新显示2个组件，一个是反应方式，一个是模板驱动方式。

Answer 1

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

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

我改变了一下你的傻瓜，主要是改变在这里：

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自定义表单控件，以模板驱动的方式使用多个输入

1 个答案: