我的域名模型是
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等以模板驱动的方式编写此子组件,以使其在父表单中以相同的方式工作?我无法弄清楚如何使子组件将视图更改传播到模型 .
Edit :根据已接受的答案,上面的plunker更新显示2个组件,一个是反应方式,一个是模板驱动方式 .
1 回答
我已经制作了模板驱动的表格,实际上是嵌套的 .
http://plnkr.co/edit/FUmAshW6NDIp44lVCe2y?p=preview
我改变了一下你的傻瓜,主要是改变在这里:
并在ControlValueAccessor实现中: