嵌套表单验证状态未滚动(angular2)

时间:2015-12-18 12:46:23

标签: angular angular2-forms

我有一个属性组件和一个地址组件。每个属性都有一个物理地址和帐单地址。在属性模板中创建一个新属性我有

<property>
property fields like name etc.. with required attribute
<address></address> (for physical address) - has required attributes as well
<address></address> (for billing address) - has required attributes as well
</property>

属性中的“保存”按钮具有form.valid检查,用于验证是否输入了所有必填字段。在上面的例子中,一旦输入了所有必需的属性字段,就会启用保存按钮,它会忽略地址组件。我们如何使用地址组件验证整个表单?

使用的版本:angular2.0(beta0)

我们希望只有在填写了所有必填字段后才能启用提交按钮。 这里是plunker链接:http://plnkr.co/edit/scq69cH3mjXrjFZn7pPp?p=preview

1 个答案:

答案 0 :(得分:1)

您可以使用您在模板中的地址组件上设置的本地模板变量来执行此操作:

<address #adress></address>

然后,您可以使用此变量访问地址组件

<input type="submit" [disabled]="!parent.form.valid||!adress.childForm.valid" value="submit" class="btn btn-success" />

我更新了你的plunkr:http://plnkr.co/edit/gSASvPwLVVW4ImQOXKWP?p=preview