当前位置: 首页 > news >正文

Angular学习之ControlValueAccessor接口详解

ControlValueAccessor 是什么?为什么需要使用 ?下面本篇文章就来带大家了解Angular中的ControlValueAccessor组件接口,希望对大家有所帮助!

 

 

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})
});

 

<form [formGroup]="myForm" (ngSubmit)="onSubmit()"><div class="form-group"><label>Name:<my-input formControlName="userName"></my-input></label></div><div class="form-group"><button type="submit">Submit</button></div>
</form>

深入理解

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 接口定义了四个方法:

  • - writeValue(obj:any):将表单模型中的新值写入视图或DOM属性(如果需要)的方法,它将来自外部的数据写入到内部的数据模型。

  • - registerOnChange(fn:any):一种注册处理程序的方法,当视图中的某些内容发生更改时应调用该处理程序。它具有一个告诉其他表单指令和表单控件以更新其值的函数。通常在 registerOnChange 中需要保存该事件触发函数,在数据改变的时候,可以通过调用事件触发函数通知外部数据变了,同时可以将修改后的数据作为参数传递出去。

  • - registerOnTouched(fn: any):注册 onTouched 事件,基本同 registerOnChange ,只是该函数用于通知表单组件已经处于 touched 状态,改变绑定的 FormControl 的内部状态。

  • - setDisabledState(isDisabled: boolean):当调用 FormControl 变更状态的 API 时得表单状态变为 Disabled 时调用 setDisabledState() 方法,以通知自定义表单组件当前表单的读写状态。

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

 

 

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

拓展:

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

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

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

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

 以上就是Angular学习之ControlValueAccessor接口详解的详细内容,请大神们多多提点,共同进步!

相关文章:

Angular学习之ControlValueAccessor接口详解

ControlValueAccessor 是什么&#xff1f;为什么需要使用 &#xff1f;下面本篇文章就来带大家了解Angular中的ControlValueAccessor组件接口&#xff0c;希望对大家有所帮助&#xff01; ControlValueAccessor 是什么&#xff1f; 简单来说ControlValueAccessor是一个接口&am…...

【GORM】高级查询方案

【GORM】高级查询方案1.Struct & Map查询为空的情况2.FirstOrInit3.FirstOrCreate4.高级查询1.Struct & Map查询为空的情况 当通过结构体进行查询时&#xff0c;GORM将会只通过非零值字段查询&#xff0c;这意味着如果你的字段值为0&#xff0c;‘’&#xff0c;false…...

MFC 简单使用事件

功能三个按钮,一个静态框,默认值是0,增加减少按钮和退出按钮.增加减少按钮显示在静态框中.退出按钮退出软件.实验事件思路新建三个事件,add事件sub事件quit事件,一个按钮触发一个事件,静态框新建一个线程接受事件做出对应的改变.UI添加的代码就不具体说,具体说下事件的代码,这才…...

华为OD机试题 - 端口合并(JavaScript)| 机考必刷

更多题库,搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 更多华为OD题库,搜 梦想橡皮擦 华为OD 👑👑👑 更多华为机考题库,搜 梦想橡皮擦华为OD 👑👑👑 华为OD机试题 最近更新的博客使用说明本篇题解:端口合并题目输入输出示例一输入输出说明示例二输入输出说明示例…...

ECharts数据可视化--常用图表类型

目录 一.柱状图 1.基本柱状图 1.1最简单的柱状图 ​编辑 1.2多系列柱状图 1.3柱状图的样式 &#xff08;1&#xff09;柱条样式 &#xff08;2&#xff09;柱条的宽度和高度 &#xff08;3&#xff09;柱条间距 &#xff08;4&#xff09;为柱条添加背景颜色 ​编辑 2.堆…...

Flutter面试题解析-GridView详解与应用

一、前言Flutter 作为时下最流行的技术之一&#xff0c;凭借其出色的性能以及抹平多端的差异优势&#xff0c;早已引起大批技术爱好者的关注&#xff0c;甚至一些 闲鱼 &#xff0c; 美团 &#xff0c; 腾讯 等大公司均已投入生产使用。虽然目前其生态还没有完全成熟&#xff0…...

最全的论文写作技巧(建议收藏)

近10年来&#xff0c;笔者有幸多次参与教学论文的评审工作&#xff0c;在此&#xff0c;特将教学论文写作的步骤及相关问题整理汇总如下&#xff1a; 一、选定论题 &#xff08;一&#xff09;论题在文中的地位与作用 严格地讲&#xff0c;论文写作是从选定论题开始的。选题…...

面向对象设计模式:设计模式分类(创建型、行为型、结构型)

1. 创建型设计模式 单例模式&#xff1a;https://blog.csdn.net/qq_44992559/article/details/129348686工厂模式&#xff1a;https://blog.csdn.net/qq_44992559/article/details/115222311抽象工厂模式&#xff1a;https://blog.csdn.net/qq_44992559/article/details/12934…...

MySQL数据库迁移

考试系统的数据库一直是在我自己的服务器上面的&#xff0c; 但是最近&#xff0c;自己的服务器马上要过期了&#xff0c;里面的MySQL数据需要迁移出来&#xff0c;放在另外一个服务器上面。百度了几篇教程&#xff0c;也没研究太多&#xff0c;选了一种比较简单的方式进行迁移…...

Docker:关于 Dockerfile 编写优化的一些笔记整理

写在前面 分享一些 Dickerfile 构建镜像优化方式的笔记理解不足小伙伴帮忙指正 对每个人而言&#xff0c;真正的职责只有一个&#xff1a;找到自我。然后在心中坚守其一生&#xff0c;全心全意&#xff0c;永不停息。所有其它的路都是不完整的&#xff0c;是人的逃避方式&#…...

个性化营销:您需要知道的信息

个性化营销在现代企业中风靡一时。我们将剖析您需要了解的有关个性化营销的信息&#xff0c;一起来了解一下吧。 什么是个性化营销&#xff1f; 个性化营销是一种一对一营销形式&#xff0c;它使用实时用户数据和分析来传递品牌信息并针对特定潜在客户。 它与传统营销不同&…...

栈和队列的相互实现

文章目录一、用栈实现队列入队&#xff1a;出队&#xff1a;Java代码实现&#xff1a;二、用队列实现栈入栈&#xff1a;出栈&#xff1a;Java代码实现&#xff1a;附&#xff1a;C版代码1、用栈实现队列2、用队列实现栈栈&#xff08;stack&#xff09;&#xff1a;先进后出&a…...

iTab新标签页重磅更新 |这些功能绝对有你想要的新体验!

01 写在前面 csdn的朋友们&#xff0c;你好哦&#xff0c;我是iTab 插件的独立开发者&#xff0c;今天给大家安利一下我做的这款桌面插件。 首先要告诉大家一个好消息&#xff1a; 最近iTab新标签页被Edge 浏览器商店官方热门&#x1f525;推荐啦。 在此&#xff0c;特别感谢…...

【改机教程】iOS系统去除小黑条,改拍照声、拨号音、键盘音,不用越狱,支持所有机型

大家好&#xff0c;上次给大家分享了几个iOS系统免越狱改机教程 今天带来最新的教程&#xff0c;这次修改利用的是同一个漏洞&#xff0c;由外网大神 tamago 开发&#xff0c;国内大神冷风 进行汉化和优化 可以修改的地方包括 去除底部小黑条 dock栏透明 桌面文件夹透明 桌面…...

Android10开机向导中复用设置中的Wifi界面

很多时候我们需要定制开机向导&#xff0c;在开机向导界面我们一般会实现联网和设置时间等功能&#xff0c;考虑复用与稳定性问题&#xff0c;我们最好复用设置中的WiFi设置和日期设置。但是设置中的wifi设置界面默认是没有下一步按钮的&#xff0c;这会让用户感觉很奇怪。在以…...

川农机械专业小伙转行Java开发,年薪20w

本期学员就业故事&#xff0c;知了姐邀请到一位“特别”的同学&#xff0c;一位从知了堂就业成功近两年的学员再度接受我们的采访。 来自四川农业大学的曾同学&#xff0c;一个本来学机械开挖掘机的粗犷男人&#xff0c;因为不断地努力学习编程&#xff0c;最终成为一个性格闷…...

华为OD机试题 - 打印文件(JavaScript)| 机考必刷

更多题库,搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 更多华为OD题库,搜 梦想橡皮擦 华为OD 👑👑👑 更多华为机考题库,搜 梦想橡皮擦华为OD 👑👑👑 华为OD机试题 最近更新的博客使用说明本篇题解:打印文件题目输入输出示例一输入输出示例二输入输出Code代码解析…...

免费常用API大全,程序员必备

淘宝接口 淘宝开放平台 http://open.taobao.com/?spma219a.7395905.1.1.YdFDV6 APISpace 生活常用 今天吃什么&#xff1a;随机返回一顿美味食物&#xff0c;解决你今天吃什么的难题。 星座查询&#xff1a;根据日期或星座名称&#xff0c;查询星座详细信息&#xff0c;包…...

MySQL主从复制,读写分离

目录 一、MySQL主从复制介绍 MySQL复制过程分成三步 二、主库配置master 1、步骤1 2、第二步:重启Mysql服务 3、第三步&#xff1a;登录Mysql数据库&#xff0c;执行下面SQL 4、第四步&#xff1a;登录Mysql数据库&#xff0c;执行下面SQL&#xff0c;记录下结果中File和…...

什么是UEFI签名认证?UEFI签名有什么好处?

为了防御恶意软件攻击&#xff0c;目前市面上所有电脑设备启动时默认开启安全启动(Secure Boot)模式。安全启动(Secure Boot)是UEFI扩展协议定义的安全标准&#xff0c;可以确保设备只使用OEM厂商信任的软件启动。UEFI签名认证就是对运行在 UEFI 系统下的 efi 驱动和通过 UEFI …...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...