Angular2-子组件中输入字段的模板驱动表单验证

Question

我在 angular2 应用程序中添加 template driven form validation 时遇到了困难。

我有一个分叉的 plunker https://plnkr.co/edit/phhe74kAUmNZgNSmcsvm?p=preview

我无法单独为我的custom component 实现表单验证，其他 html 组件工作正常。

在 plunker 中，如果您开始输入 name 和 street，它将在 form 和我的 model object 中更新。但是当您开始输入postcode 时，它只会在我的model object 和not with form 中更新。

如果我将postcode 归档为空，我希望form 成为invalid。

我错过了什么吗？

Answer 1

目前，您的表单无法将您的子组件的输入字段识别为表单字段，您需要稍微更改您的子标签...以具有name 属性和ngModel 来绑定此子组件到表格。在此处还包括required。

最后，您需要添加ngDefaultControl 以对表单字段进行双向绑定。所以你的子标签在你的父母中应该是这样的：

<my-input name="postcode" ngModel ngDefaultControl required [(value)]="user.address.postcode"></my-input>

这是你的分叉

Plunker