小编Lam*_*kis的帖子

Angular 2自定义复合控件

我试图创建一个角度自定义复合控件2.我的要求,我需要创建一个通用的文件选择器控制,允许用户选择文件或者使用HTML5输入[type = file] 或者通过输入查询的URL一份文件。

我决定创建用于两个子控件都实现ControlValueAccessor接口的通用表单控件,因为它们将在其他地方单独使用。

我试图将它们都包装在一个文件选择器本地或远程(缺少更好的单词)控件中。该外部控件应负责发出所选文件的内容,而不必关心文件的选择方式。

将价值一直传播到消费形式很容易。每次子控件将值传播给中间控件时,中间控件都会使用registerChange回调将其进一步向上传递到消费者链。

但是,我在传播可能在子控件中发生的验证错误时遇到了麻烦。我需要将错误一直传播到使用表单,以便可以将其本地化。

例如,如果用户在remote-file-picker子控件中输入无效的url,则该子控件的验证功能将触发并显示正确的错误。该错误提供给中间控件。如何将该无效URL错误一直传播到使用表单?

更广泛地说,是否有关于如何在Angular 2中创建复合控件的特定指南?我找不到包装其他自定义控件的任何自定义控件示例,因此我不确定自己是否正确执行了操作。

换句话说,鉴于:

形成:

outerForm = new FormGroup({
    file: new FormControl(null, Validators.required)
});

<form [formGroup]="outerForm">
    <File-Picker-Local-Or-Remote formControlName="file"></File-Picker-Local-Or-Remote>
    <span class="error">******???******</span>
</form>
Run Code Online (Sandbox Code Playgroud)

文件选择器本地或远程

innerForm = new FormGroup({
    local: new FormControl(),
    remote: new FormControl(null, Validators.pattern('http://...'))
});

<input type="file" formControlName="local" />
<input type="text" formControlName="remote" />
Run Code Online (Sandbox Code Playgroud)

当远程子控件验证失败时,它将其错误代码提供给innerForm。如何将这些错误消息传播到外部格式,以便可以用适当的验证消息替换****** ??? ******?

编辑:我应该注意,我有很多方法可以破解解决方案或绕过此问题,包括使用事件发射器构建自己的解决方案,而不是首先使用复合控件,等等。

我真正感兴趣的是Angular 2创建可重用和可扩展的窗体控件的方法,消费者可以像其他任何窗体控件一样与之交互,并且可以由其他开发人员进一步构建以创建更高级别的控件。

javascript angular

3
推荐指数
1
解决办法
700
查看次数

标签 统计

angular ×1

javascript ×1