Angular之ControlValueAccessor接口怎么使用

这篇文章主要讲解了“Angular之ControlValueAccessor接口怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Angular之ControlValueAccessor接口怎么使用”吧!

成都创新互联公司专业为企业提供当阳网站建设、当阳做网站、当阳网站设计、当阳网站制作等企业网站建设、网页设计与制作、当阳企业网站模板建站服务,10余年当阳做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

ControlValueAccessor是什么?

简单来说ControlValueAccessor是一个接口,它被用于在 Angular 的 FormControl 实例和原生 DOM 元素之间创建一个桥梁。其使用方式和OnInit类似,需要程序员在自定义组件里面实现相应的方法。

import {
ControlValueAccessor,
NG_VALUE_ACCESSOR
} from '@angular/forms';

@Component({
    selector: 'custom',
    templateUrl: './custom.component.html',
    styleUrls: ['./custom.component.less'],
    providers: [     
      {
        provide: NG_VALUE_ACCESSOR, 
        useExisting: forwardRef(() => CustomComponent),
        multi: true     
      }   
    ]
})
export class CustomComponent implements ControlValueAccessor, OnInit, {…

为什么需要使用 ControlValueAccessor

有时,你可能需要创建自定义的表单元素,并希望它能和Angular的FormControl成功通信。这时你便需要ControlValueAccessor来实现这个目的。

比如:

this.myForm = new FormGroup({
    userName: new FormControl({value: '', disabled: false})
});

    
        
    
             Submit     

深入理解

ControlValueAccessor的使用方法在Angular官网和很多的文章中都有介绍,但是它具体是如何起作用的呢?

Angular 需要一种通用机制来桥接原生/自定义表单控件和 formControl 指令,而这正是 ControlValueAccessor 干的事情。这个对象桥接原生表单控件和 formControl 指令,并同步两者的值。任何一个组件或指令都可以通过实现 ControlValueAccessor 接口并注册为 NG_VALUE_ACCESSOR,从而转变成 ControlValueAccessor 类型的对象。

其实原生表单控件也拥有类似于ControlValueAccessor的接口,比如:当 Angular 在组件模板中中遇到 input 或 textarea DOM 原生控件时,就会使用DefaultValueAccessor 指令

Accessor

Form Element

DefaultValueAccessor

input,textarea

CheckboxControlValueAccessor

input[type=checkbox]

NumberValueAccessor

input[type=number]

RadioControlValueAccessor

input[type=radio]

RangeValueAccessor

input[type=range]

SelectControlValueAccessor

select

SelectMultipleControlValueAccessor

select[multiple]

以上是Angular 为所有原生 DOM 表单元素创建的 Angular 表单控件,即内置ControlValueAccessor

ControlValueAccessor 接口定义了四个方法:

formControl 指令使用 writeValue 方法设置原生表单控件的值;使用 registerOnChange 方法来注册由每次原生表单控件值更新时触发的回调函数,我们需要把更新的值传给这个回调函数,这样对应的 Angular 表单控件值也会更新;使用 registerOnTouched 方法来注册用户和控件交互时触发的回调。

Angular之ControlValueAccessor接口怎么使用

formControl会调用名为setUpControl的函数,ControlValueAccessor的实例valueAccessor会被作为参数传入这个函数中。在setUpControl中,ControlValueAccessor的四个方法会在交互时被调用,以完成formControl和元素之间的通信。

拓展:

在使用ControlValueAccessor时需要一同引入NG_VALUE_ACCESSOR,它是使用InjectionToken 创建的可在 Provider 中使用的 Token。我们在编写自己的项目时一般不需要用到InjectionToken,但是在一个框架或者第三方的插件中,它就变得十分有必要了。

export const NG_VALUE_ACCESSOR =
    new InjectionToken>('NgValueAccessor');

试想当我使用依赖注入的功能时,我需要将我创建的依赖注册进组件中。这时我就需要一个令牌,如果我使用一个字符串作为令牌就有可能会造成重复,相同的令牌会导致后面的覆盖前面的。所以需要一个Token作为一个唯一值来防止这种冲突。

providers: [{ provide: TOKEN, useValue: … }]

感谢各位的阅读,以上就是“Angular之ControlValueAccessor接口怎么使用”的内容了,经过本文的学习后,相信大家对Angular之ControlValueAccessor接口怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


当前名称:Angular之ControlValueAccessor接口怎么使用
网站链接:http://scyanting.com/article/jicpsh.html

其他资讯