如何在Angular2中使自定义表单组件与表单验证集成？

Question

我在Angular2中有一个自定义表单组件，使用ControlValueAccessor接口与父组件中的表单集成。这很适合在触摸组件时使表单变脏。

但是我找不到任何方法来获取组件上的字段，标记为“必需”，导致父表单在未完成时变为“无效”。

这甚至可能吗？

Answer 1

自定义表单组件可以使用必需的属性标记..因此，通过[（ngModel）]绑定到它的任何值都将针对该FormControl进行验证。

您的自定义组件是否包含许多输入字段？如果是这样，那么我认为您需要查看该组件的自定义验证 - 请参阅此示例： Custom Component validation。验证逻辑返回的值将传播到父级，并影响父表单是有效还是无效。

如果您的自定义组件只是围绕单个输入字段的包装，那么您只需要使用必需标记自定义组件 - 如果它无效，则FormControl（对于＆＃39; custom＆＃39; ）将被标记为无效（因此父母表格也是如此）。

<app-custom-component name="custom" [(ngModel)]="model.customValue" required>
</app-custom-component>

其中CustomComponet的模板包含<input />字段。