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

Question

我正在努力在我的angular2应用中添加template driven form validation。

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

我无法单独对custom component进行表单验证，其他html组件工作正常。

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

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

我错过了什么吗？

Answer 1

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

最后，您需要添加ngDefaultControl以对表单字段进行双向绑定。因此，您的子标记在您的父级中应该如下所示：

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

这是你的分叉

Plunker