Angular Forms - 自定义 ngModel 绑定值的方式

在 Angular 应用中,我们有两种方式来实现表单绑定——“模板驱动表单”与“响应式表单”。这两种方式通常能够很好的处理大部分的情况,但是对于一些特殊的表单控件,例如input[type=datetime]input[type=file],我们需要重写默认的表单绑定方式,让我们绑定的变量不再仅仅只是一个字符串,而是一个 Date 或者 File 对象。为了达成这一目的,我们需要自定义表单控件的 ControlValueAccessor

ControlValueAccessor 接口是 Angular Forms API 与 DOM 之间的桥梁,通过提供不同的 ControlValueAccessor,我们就可以使用统一的 Angular Forms API 来操作不同的 HTML 表单元素。

在我们使用 ngModel 或者 formControl 的时候,这两个 Directive 会向 Angular 的依赖注入容器申请实现了 ControlValueAccessor 接口的对象,这是一种典型的面向接口编程的设计。例如,如果我们需要为 input[type=file] 提供一个用来绑定 File 对象的 ControlValueAccessor,只需要在依赖注入容器中提供一个 FileControlValueAccessor 的实现就可以了。不过,我们并不想覆盖其他类型 input 元素的 ControlValueAccessor,因为那样肯定会对已有代码造成大范围的破坏。所以在这里,我们需要使用 Angular 的分层注入能力——在 ElementInjector 中提供 FileControlValueAccessor。关于 ElementInjector 更多的内容,请看这里 a-curios-case-of-the-host-decorator-and-element-injectors-in-angular。

下面演示的两个 Directive 您都可以在这里查看在线演示。

首先让我们来创建一个 Directive,这个指令将会选中 input[type=file][appInputFile] 元素,这样我们就可以有选择的为文件选择器的 ElementInjector 定义新的 Provider。

@Directive({selector: 'input[type=file][inputFile]',        // <1>providers: [{provide: NG_VALUE_ACCESSOR,                         // <2>useExisting: forwardRef(() => InputFileDirective),  // <3>multi: true     // <4>}]
})
export class InputFileDirective implements ControlValueAccessor, OnInit, OnDestroy {// 当文件选择器选择的文件发生改变时调用的回调函数onChange: (any) => any;// 当文件选择器选择的被操作后调用的回调函数onTouched: () => any;// 监听宿主元素的 change 事件@HostListener('change', ['$event.target.files']) onElChange = (files: FileList) => {this.onChange(files);};// 监听宿主元素的 blur 事件@HostListener('blur', []) onElTouched = () => {this.onTouched();};constructor(private el: ElementRef<HTMLInputElement>) {     // <5>}ngOnInit(): void {this.el.nativeElement.addEventListener('change', this.listener);}// 来自 ControlValueAccessor 接口,用来设置元素的值writeValue(obj: any): void {this.el.nativeElement.value = obj;}// 来自 ControlValueAccessor 接口,用来将一个函数注册为 onChange 回调函数registerOnChange(fn: any): void {this.onChange = fn;}// 来自 ControlValueAccessor 接口,用来将一个函数注册为 onTouched 回调函数registerOnTouched(fn: any): void {this.onTouched = fn;}// 来自 ControlValueAccessor 接口,设置表单元素是否启用setDisabledState?(isDisabled: boolean): void {this.el.nativeElement.disabled = isDisabled;}}

上面的代码片段中你可以看到有几处类似 // <1> 的注释,这是我用来在下面的文章中引用该行代码的标记,语法借鉴自 ASCIIDoc

  1. 通过定义一个复合的选择器,我们可以有选择的对 input[type=file] 重写 ControlValueAccessor
  2. ControlValueAccessor 的注入 token 是一个常量 —— NG_VALUE_ACCESSOR
  3. 由于 Directive 的定义在这行代码的下面,所以需要使用 forwardRef 来引用这个依赖的实现。
  4. 这里需要将 multiple 设置为 true,因为 Angular 默认的 ControlValueAccessor 就是提供了多个实现的。在解析依赖的时候,Angular 会优先选择我们自定义的实现。
  5. 为了代码更加简单,我在这里选择了不利于服务端渲染的 ElementRef.nativeElement 来读取原生 HTML 元素的属性,如果你对服务端渲染有需求,你应该使用 Renderer2 来读写元素的属性。

有了这个 Directive,我们就可以在 Angular Forms 中绑定 File 对象了:

<input type="file" [(ngModel)]="foo.files" inputFile />

Date 类型的数据也是日常开发中比较头疼的一个地方,因为在 JSON 中,Date 类型往往会被序列化为字符串,而在前端代码中,我们又需要将其反序列化为 Date 对象,最终在页面上展示的时候,我们又需要按照产品需求再将其序列化为制定格式的字符串。现在,有了 ControlValueAccessor 的帮助,我们就可以实现让 input[type=datetime]Date 对象进行双向绑定的功能,同时还能够定制 Date 对象在输入框中的显示格式。

@Directive({// tslint:disable-next-line:directive-selectorselector: 'input[type=datetime][valueAsDate]',providers: [{provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => DateValueDirective),multi: true}]
})
export class DateValueDirective implements ControlValueAccessor {/*** See https://date-fns.org/v2.0.0-alpha.25/docs/format* 自定义日期展示格式* @type {string}* @memberof DateValueDirective*/// tslint:disable-next-line:no-input-rename@Input('valueAsDate') format: string;private dateValue: Date;@HostListener('input', ['$event.target.value']) onChange = (_: any) => { };@HostListener('blur', []) onTouched = () => { };get element() { return this.elementRef.nativeElement; }constructor(private elementRef: ElementRef,private renderer: Renderer2     // <1>) { }parseDate(str: string) {return parseDate(str, this.format, new Date(), { awareOfUnicodeTokens: true });}formatDate(date: Date) {return formatDate(date, this.format, { awareOfUnicodeTokens: true });}/*** 设置组件的值的时候,先把新的值存到一个成员变量中,然后再把新的值格式化为 string*/writeValue(date: Date): void {this.dateValue = date;this.renderer.setProperty(this.element, 'value', this.formatDate(date));}/*** 在 input 元素值发生变化的时候,先尝试把变化后的值转换成 Date 对象* 如果转换失败,那么依然使用之前的值* 否则,将新的值传递给回调函数*/registerOnChange(fn: any): void {const onChange = (value: string) => {const date = this.parseDate(value);if (isValidDate(date)) {this.dateValue = date;fn(date);} else {fn(this.dateValue);}};this.onChange = onChange;}registerOnTouched(fn: any): void {this.onTouched = fn;}setDisabledState?(isDisabled: boolean): void {this.renderer.setProperty(this.element, 'disabled', isDisabled);}
}
  1. 这里演示了使用 Renderer2 来读写元素属性的操作

整个指令的内容仍然非常简单,但是却能够为我们的日常开发带来不小的便利,使用了这个指令后,我们就可以非常容易的为 Date 对象进行双向绑定。

<input type="datetime" valueAsDate="M/d/yyyy h:mm:ss a" [(ngModel)]="foo.date">

转载于:https://www.cnblogs.com/JacZhu/p/10087447.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/250071.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[web性能优化] - 使用在线工具对html、js、css进行压缩

参考 1. 学习点 使用 在线工具对html、css、js进行压缩学会分析压缩前后的效率提高点 2. 解决方案: 2.1 HTML压缩 在线压缩nodejs提供了 html-minifier工具(在构建层对代码进行压缩)后端模板引擎渲染压缩 2.2 CSS压缩 使用html-minifier对html中的css进行压缩使用clean-cs…

【LOJ】 #2540. 「PKUWC2018」随机算法

题解 感觉极其神奇的状压dp \(dp[i][S]\)表示答案为i&#xff0c;然后不可选的点集为S 我们每次往答案里加一个点&#xff0c;然后方案数是&#xff0c;设原来可以选的点数是y&#xff0c;新加入一个点后导致了除了新加的点之外x个点不能选&#xff0c;那么方案就是把x个数在y …

Shiro的authc过滤器的执行流程

1.先执行isAccessAllowed()&#xff0c;通过subject.isAuthenticated()判断当前session中的subject是否已经登陆过。如果在当前session即会话中已经登陆过&#xff0c;返回true&#xff0c;authc过滤器放行请求到loginUrl。 问题? 这里会有一个问题&#xff0c;如果我登陆成功…

SpringBoot之基础

简介 背景 J2EE笨重的开发 / 繁多的配置 / 低下的开发效率 / 复杂的部署流程 / 第三方技术集成难度大 特点 ① 快速创建独立运行的spring项目以及主流框架集成 ② 使用嵌入式的Servlet容器, 应用无需达成war包 ③ starters自动依赖和版本控制 ④ 大量自动配置, 简化开发, 也可修…

[Java核心技术(卷I)] - vscode手动编译运行继承类

参考 - P160~P161 主要有3个类: 一个测试类(ManagerTest)、一个子类(Manager)、一个父类(Employee) 注意点: -1. 使用 javac -d . *.java进行预编译 目录结构入下: 此时会生成目录结构如下: 之后运行 java com.inheritance.ManagerTest 附上几个类的代码 // com.inhe…

mysql常用语句和函数

mysql语句如果长期不写&#xff0c;就会忘掉&#xff0c;所以要时常复习&#xff0c;温故而知新。 1.select length("中国人"),select char_length("中国人"); 2建立数据库的语句 use new_schema;create table ta(id int primary key);这是小括号&#xff…

shiro框架@RequiresPermissions 解释

RequiresAuthentication 验证用户是否登录&#xff0c;等同于方法subject.isAuthenticated() 结果为true时。 RequiresUser 验证用户是否被记忆&#xff0c;user有两种含义&#xff1a; 一种是成功登录的&#xff08;subject.isAuthenticated() 结果为true&#xff09;&…

【Social Listening实战】当数据分析遭遇心理动力学:用户深层次的情感需求浮出水面...

本文转自知乎 作者&#xff1a;苏格兰折耳喵 ————————————————————————————————————————————————————— 本文篇幅较长&#xff0c;分为五部分&#xff0c;在中间部分有关于心理分析工具的介绍&#xff0c;案例分散在第二部…

Python 字符串切片

#-*- coding:utf-8 -*-#字符串切片names "abcdefgh"切片语法 names[起始位置:终止位置:步长] 起始位置:即字符串的下标&#xff0c;可以是正序下标(0,1,2...)&#xff0c;也可以是逆序下标(-1,-2,-3...) 终止位置:也是字符串的下标&#xff0c;但是和起始位置下标不…

[Java核心技术(卷Ⅰ)] - 判断相等

参考 - P184 public boolean equals(Object otherObject) {// a quick test to see if the objects are identicalif (this otherObject) return true;// must return false if the explicit parameter is nullif (otherObject null) return null;// if the classes dont ma…

Oracle 11g DG主库节点2 ORA-00245: control file backup fail

--节点1报错 Sun Dec 09 08:29:57 2018Control file backup creation failed: failure to open backup target file /u01/app/oracle/product/11.2.0/db_1/dbs/snapcf_zwdb.ctl.Errors in file /u01/app/oracle/diag/rdbms/zwdb/zwdb2/trace/zwdb2_arc0_167660.trc:ORA-27037: …

hive字符函数

转载于:https://www.cnblogs.com/ggzhangxiaochao/p/9222732.html

java动态编译

编译&#xff0c;一般来说就是将源代码转换成机器码的过程&#xff0c;比如在C语言中中&#xff0c;将C语言源代码编译成a.out,&#xff0c;但是在Java中的理解可能有点不同&#xff0c;编译指的是将java 源代码转换成class字节码的过程&#xff0c;而不是真正的机器码&#xf…

[c++] - 简单的冒泡

#include <iostream> using namespace std;int main() {// 利用冒泡排序实现升序序列int arr[9] {4, 2, 8, 0, 5, 7, 1, 3, 9};cout << "排序前: " << endl;for (int i 0; i < 9; i){cout << arr[i] << " ";}cout <…

Python爬虫之解析网页

常用的类库为lxml, BeautifulSoup, re(正则) 以获取豆瓣电影正在热映的电影名为例,urlhttps://movie.douban.com/cinema/nowplaying/beijing/ 网页分析 部分网页源码 <ul class"lists"><liid"3878007"class"list-item"data-title"…

腾讯企业邮箱报错 smtp.exmail.qq.comport 465, isSSL false

一、报错 "smtp.exmail.qq.com" port 465, isSSL false 通过网上搜索查询一些资料&#xff0c;推测是邮箱的配置出问题了。 二、修改邮箱配置 1 // 创建属性2 Properties props new Properties();3 props.setProperty("mail.transport.protocol", "s…

spring与JDK版本对应关系

搭建spring框架得时候要考虑jdk的版本&#xff0c;提供一下参考 JDK 8 中可以使用 Spring Framework 5.x JDK 7 中可以使用 Spring Framework 4.x JDK 6 中可以使用 Spring Framework 4.x JDK 5 中可以使用 Spring Framework 3.x

Markdown预览功能不可用解决方案

初学者在使用Markdown时也许会遇到这个问题 原因是电脑缺少一个组件&#xff0c;解决方案很简单&#xff0c;安装上就好了&#xff0c;以下是链接 http://markdownpad.com/download/awesomium_v1.6.6_sdk_win.exe转载于:https://www.cnblogs.com/j9oker/p/10092829.html

Linux 中yum的配置

1.进入yum的路径 cd /etc/yum.repos.d 2.将原始的repo文件移入一个新建的backup文件下做备份 mv CentOS* backup 3.在/etc/yum.repos.d下新建一个自己的文件(这里的文件必须以repo结尾); vi zhi.repo 其中&#xff0c;第一行必须是[文件名]的格式  是一个标记 name*** 这是一…

[生态建设] - js判断小技巧

0、参考 说明: 从几个易得的点出发,逐步向外扩展延申,保证代码的可靠性 1、判断是否为某个类型 // 判断是否为 null const isNull o > {return o null; };// 判断是否为 undefined const isUndefined o > {return o undefined; };// 判断是否为 null or undefined…