我需要能够使用formControlName
我的自定义组件的指令。
我一直在阅读有关实施的多个SO问题ControlValueAccessor
对于一个子组件来说,这一切看起来都非常脆弱。
很多例子都在转变<div>
or <span>
元素转换为表单元素,因此实现预期的所有功能是有意义的ControlValueAccessor
.
但是,我的组件只是使用本机<input>
元素。我正在创建一个单独的组件,因为我想在输入中使用一些图标,而且我显然不想在任何地方复制/粘贴图标 css。
我遇到过DefaultValueAccessor
类似乎是 Angular 用于所有本机输入元素的类。我也可以在我的自定义组件中以某种方式利用这种行为吗?
我只是不想复制这个功能。由于错误和各种浏览器行为,长期维护它可能很困难。我宁愿只使用已经与本机输入关联的功能。
Edit
这是代码片段<jg-search>
(我的自定义组件):
<div>
<svg>
<!-- some content -->
</svg>
<label for="search">Search</label>
<input id="search" type="text"></input>
<svg>
<!-- some content -->
</svg>
</div>
我希望能够以这种方式调用它:<jg-search formControlName="keyword">
.
这可以通过实施ControlValueAccessor
在搜索组件中。但由于我只是使用原生<input type="text">
,我不想重新实现已定义的功能DefaultValueAccessor
.
一种可能的解决方案是使用ngDefaultControl
自定义组件上的属性:
<div [formGroup]="form">
<jg-search formControlName="x" ngDefaultControl></jg-search>
^^^^^^^^^^^^^^^^
</div>
现在您需要做的就是链接您的input
现有 FormControl 的元素如下:
@Component({
selector: 'jg-search',
template: `
<input [formControl]="ngControl.control">
`
})
export class MyInput {
constructor(public ngControl: NgControl) {}
}
欲了解更多详情,请参阅NG 运行示例 https://ng-run.com/edit/NFwmXDfevdpThS0dizzA
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)