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

Question

我在 Angular2 中有一个自定义表单组件，使用 ControlValueAccessor 接口(interface)与父组件中的表单集成。这对于在触摸组件时使表单变脏非常有效。

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

这可能吗？

Answer 1

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

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

如果您的自定义组件只是单个输入字段的包装器，那么您只需将自定义组件标记为必需 - 因此如果它无效，则 FormControl(用于“自定义”)将被标记为无效(因此父表单也是如此)。

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

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