对于自定义表单组件，是否可以使用DefaultValueAccessor代替ControlValueAccessor?

问题描述

我需要能够对自定义组件使用formControlName指令.

I need to be able to use the formControlName directive for my custom component.

我一直在阅读有关为子组件实现ControlValueAccessor的多个SO问题，这一切似乎都很脆弱.

I've been reading through the multiple SO questions about implementing ControlValueAccessor for a child component, and it all seems very fragile.

许多示例将<div>或<span>元素转换为表单元素，因此实现ControlValueAccessor期望的所有功能是有意义的.

A lot of the examples are transforming <div> or <span> elements into form elements, and so it makes sense to implement all the functionality expected by ControlValueAccessor.

但是，我的组件仅使用本机的<input>元素.我创建一个单独的组件是因为我想在输入中使用一些图标，并且显然不想在各处复制/粘贴图标css.

However, my component is just using the native <input> element. I'm creating a separate component because I want to use some icons with the input, and I obviously don't want to copy/paste the icon css everywhere.

我遇到了DefaultValueAccessor类，它似乎是angular用于所有本机输入元素的类.我是否可以通过某种方式为我的自定义组件利用这种行为?

I've come across the DefaultValueAccessor class which seems to be what's used by angular for all the native input elements. Can I leverage this behavior somehow for my custom component as well?

我只是不想复制此功能.就错误和各种浏览器行为而言，长期维护它可能很困难.我宁愿只使用已经与本机输入关联的功能.

I just don't want to replicate this functionality. It could be difficult to maintain it over the long term with regards to bugs and various browser behavior. I would rather just use the functionality that's already associated with the native inputs.

这是<jg-search>(我的自定义组件)的代码段:

Here's the code snippet of <jg-search> (my custom component):

<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">.

I want to be able to just call it this way in a form: <jg-search formControlName="keyword">.

这可以通过在SearchComponent中实现ControlValueAccessor来实现.但是由于我只使用本机<input type="text">，所以我不想重新实现DefaultValueAccessor中已经定义的功能.

This is possible by implementing ControlValueAccessor in the SearchComponent. But since I'm just using the native <input type="text">, I don't want to reimplement the functionality already defined in DefaultValueAccessor.

推荐答案

一种可能的解决方案是在自定义组件上使用ngDefaultControl属性:

One possible solution could be using ngDefaultControl attribute on your custom component:

<div [formGroup]="form">
    <jg-search formControlName="x" ngDefaultControl></jg-search>
                                   ^^^^^^^^^^^^^^^^
</div>

现在您要做的就是将input元素与现有的FormControl链接起来，如下所示:

now all you need to do is to link your input element with existing FormControl as follows:

@Component({
  selector: 'jg-search',
  template: `
   <input [formControl]="ngControl.control">
  `
})
export class MyInput {
  constructor(public ngControl: NgControl) {}
}

有关更多详细信息，请参见 Ng运行示例

For more detals see Ng-run Example

这篇关于对于自定义表单组件，是否可以使用DefaultValueAccessor代替ControlValueAccessor?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！