首页 文章

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

提问于
浏览 次
0

我正在努力在我的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 .

我错过了什么吗？

forms validation angular

1 回答

  • 2

    目前，您的表单不是't recognize your child components'输入字段作为表单字段，您需要稍微更改您的子标记...以具有 name 属性和 ngModel 将此子组件绑定到表单 . 此处还包括 required .

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

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

    这是你的分叉

    Plunker

    回复于

相关问题