前端开发少不了和表单打交道; Angular中, 提供了强大的表单的支持, 响应式表单(Reactive Form)模板驱动的表单(Template-driven Form) 的双向数据流给我们的开发带来了极大的便利; 借助angular, 我们除了可以使用html原生的输入控件, 也可以自定表单输入组件, 和用户更好的交互. 本文以 TagInput 组件为例, 说明在Angular中如何自定义表单组件;

可以先看下最终效果

github Page在线演示

ControlValueAccessor

自定义表单组件第一步, 实现ControlValueAccessor接口

接口定义如下:

ControlValueAccessor 接口声明
export declare interface ControlValueAccessor {
/**
* @description
* Writes a new value to the element.
*
* This method is called by the forms API to write to the view when programmatic
* changes from model to view are requested.
*
* @usageNotes
* ### Write a value to the element
*
* The following example writes a value to the native DOM element.
*
* ```ts
* writeValue(value: any): void {
* this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
* }
* ```
*
* @param obj The new value for the element
*/
writeValue(obj: any): void;
/**
* @description
* Registers a callback function that is called when the control's value
* changes in the UI.
*
* This method is called by the forms API on initialization to update the form
* model when values propagate from the view to the model.
*
* When implementing the `registerOnChange` method in your own value accessor,
* save the given function so your class calls it at the appropriate time.
*
* @usageNotes
* ### Store the change function
*
* The following example stores the provided function as an internal method.
*
* ```ts
* registerOnChange(fn: (_: any) => void): void {
* this._onChange = fn;
* }
* ```
*
* When the value changes in the UI, call the registered
* function to allow the forms API to update itself:
*
* ```ts
* host: {
* '(change)': '_onChange($event.target.value)'
* }
* ```
*
* @param fn The callback function to register
*/
registerOnChange(fn: any): void;
/**
* @description
* Registers a callback function that is called by the forms API on initialization
* to update the form model on blur.
*
* When implementing `registerOnTouched` in your own value accessor, save the given
* function so your class calls it when the control should be considered
* blurred or "touched".
*
* @usageNotes
* ### Store the callback function
*
* The following example stores the provided function as an internal method.
*
* ```ts
* registerOnTouched(fn: any): void {
* this._onTouched = fn;
* }
* ```
*
* On blur (or equivalent), your class should call the registered function to allow
* the forms API to update itself:
*
* ```ts
* host: {
* '(blur)': '_onTouched()'
* }
* ```
*
* @param fn The callback function to register
*/
registerOnTouched(fn: any): void;
/**
* @description
* Function that is called by the forms API when the control status changes to
* or from 'DISABLED'. Depending on the status, it enables or disables the
* appropriate DOM element.
*
* @usageNotes
* The following is an example of writing the disabled property to a native DOM element:
*
* ```ts
* setDisabledState(isDisabled: boolean): void {
* this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
* }
* ```
*
* @param isDisabled The disabled status to set on the element
*/
setDisabledState?(isDisabled: boolean): void;
}

这个接口包含了下面这些方法

writeValue(obj: any): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
setDisabledState?(isDisabled: boolean): void;
  • writeValue(obj: any): void; 表单值发生改变时Angular会调用这个方法给我们的表单组件赋值
  • registerOnChange(fn: any): void; Angular调用这个函数给我们的自己写的组件传递一个onChange方法, 调用这个方法, 会更新表单中的值
  • registerOnTouched(fn: any): void; Angular通过这个方法给我们在组件传递一个onTouch方法, 在我们的组件中调用onTouch会更新表单的 touched 字段

注入 NG_VALUE_ACCESSOR

除了实现 ControlValueAccessor 接口外, 我们自定义的表单组件还需要提供一个 token 为 NG_VALUE_ACCESSOR 的注入, 像下面这样

import {
forwardRef,
OnInit,
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; @Component({
selector: 'cti-tag-input',
templateUrl: './tag-input.component.html',
styleUrls: ['./tag-input.component.less'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TagInputComponent),
multi: true,
},
],
})
export class TagInputComponent implements OnInit, ControlValueAccessor {
}

实例: TagInput 组件

了解了上面的内容, 就可以开始编写 TagInput 组件了;

组件的html模板
<div [class.disabled]='disabled'
class="tag-input-wrapper">
<div class="tag-list">
<span class="tag"
*ngFor="let tag of tags">
{{tag}}
</span>
</div>
<div>
<ng-container *ngIf="!isInputting">
<button class="btn-add-tag"
(click)="onClick()">新增标签</button>
</ng-container>
<ng-container *ngIf="isInputting">
<input type="text"
#tagInputEl
(keydown)="onKeyDown($event)"
[(ngModel)]="tagInput"
(blur)="onBlur()">
</ng-container>
</div>
</div>

TagInputComponent中需要定义如下字段

// 文本输入框, 用来获取用户输入的标签的, 拿到这个可以在适当的时机对输入框进行 focus 操作
@ViewChild('tagInputEl', { read: ElementRef })tagInputEl: ElementRef<HTMLInputElement>;
tags: string[] = [];
// 指示表单组件是否处于禁用状态
disabled = false;
// 保存用户输入的文字
tagInput = '';
// 当前是否正在输入
isInputting = false; private _onChange = (_: string[]) => {};
private _onTouch = () => {};

实现ControlValueAccessor

writeValue(obj: any): void {
if (obj instanceof Array && obj.every((x) => typeof x === 'string')) {
this.tags = obj;
}
}
registerOnChange(fn: any): void {
this._onChange = fn;
}
registerOnTouched(fn: any): void {
this._onTouch = fn;
}
setDisabledState?(isDisabled: boolean): void {
this.disabled = isDisabled;
}

在适当的时机调用 Angular 传递给我们的 _onChange, _onTouch 方法, 更新表单值

onKeyDown(event: KeyboardEvent) {
// 回车键键值: 13
if (event.key.toLowerCase() === 'enter' || event.key === ',') {
this.emitTags();
}
} onBlur = () => {
this.emitTags();
}; onClick() {
this.isInputting = !this.isInputting;
let timer = setTimeout(() => {
this.tagInputEl.nativeElement.focus();
clearTimeout(timer);
timer = undefined;
}, 20);
} private emitTags() {
if (!this.tags.includes(this.tagInput) && this.tagInput) {
this.tags.push(this.tagInput);
this._onChange(this.tags);
}
this.tagInput = '';
this.isInputting = false;
this._onTouch();
}

查看完整的 TagComponent 代码

最终效果

查看完整代码

CustomTagInput

Angular写一个Form组件-TagInput的更多相关文章

  1. 写一个vue组件

    写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件 ...

  2. js单行写一个评级组件

    单行写一个评级组件:"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate); -----------------------------------分隔符- ...

  3. 表单配置项写法,表单写成JSON数组套对象,一行是一个数组单位,一列是一个对象单位,然后再写一个公共组件读取这个配置,循环加载slot,外层载入slot的自定义部分,比如input select等,这种写法就是把组件嵌套改为配置方式

    表单配置项写法,表单写成JSON数组套对象,一行是一个数组单位,一列是一个对象单位,然后再写一个公共组件读取这个配置,循环加载slot,外层载入slot的自定义部分,比如input select等,这 ...

  4. Vue3语法快速入门以及写一个倒计时组件

    Vue3写一个倒计时组件 vue3 beta版本发布已有一段时间了,文档也大概看了一下,不过对于学一门技术,最好的方法还是实战,于是找了一个比较简单的组件用vue3来实现,参考的是vant的count ...

  5. 手动实现一个form组件

    最近研究了一下element-ui,想着手动实现一下里面的form组件,贴个组件里面的代码 <el-form :model="ruleForm" status-icon :r ...

  6. [翻译]怎么写一个React组件库(一)

    本文同步发布于知乎专栏 https://zhuanlan.zhihu.com/p/27401329,喜欢本文的就去知乎点个赞支持下吧- 引言 该系列文章将通过创建一个组件库来引导你学习如何构建自己的组 ...

  7. HTML+CSS+JS(+Vue)写一个通讯录组件

    求各位大大的Star(*/ω\*). 没有录屏,所以上传的是图片.后面已补充录屏效果. 效果:(主要是参考小米Note3的通讯录的效果做的) 主要功能: 1. 滚动后,通讯录的模块标题会固定在顶部(图 ...

  8. 手写一个admin 组件------STARK

    开一个新的项目,,建立一个stark 包, 在里面创建一个service包,在service 包里创建一个stark.py 文件, 配置好环境, makemigreations, migreate. ...

  9. 在React中写一个Animation组件,为组件进入和离开加上动画/过度

    问题 在单页面应用中,我们经常需要给路由的切换或者元素的挂载和卸载加上过渡效果,为这么一个小功能引入第三方框架,实在有点小纠结.不如自己封装. 思路 原理 以进入时opacity: 0 --> ...

随机推荐

  1. java使用正则的例子

    package com.accord.util; import java.util.ArrayList; import java.util.List; import java.util.regex.M ...

  2. 使用Python实现的4种快速排序算法

    快速排序算法,总体来说就是选一个基准值,把小于基准值的分一拨,把大于基准值的分到另一拨,然后递归. 有区别的是,分区算法有差异,最直接的是,选个基准值,定义两个列表(小值分区less和大值分区grea ...

  3. 使用 Admission Webhook 机制实现多集群资源配额控制

    1 要解决的问题 集群分配给多个用户使用时,需要使用配额以限制用户的资源使用,包括 CPU 核数.内存大小.GPU 卡数等,以防止资源被某些用户耗尽,造成不公平的资源分配. 大多数情况下,集群原生的 ...

  4. 利用dotnet-dump分析docker容器内存泄露

    目录 一 运行官方示例 1,Clone代码并编译 2,创建Dockerfile构建镜像 3,启动容器 二 生成dump转储文件 1,制造问题 2,创建dump文件 三 分析dump文件 1,创建一个用 ...

  5. 【C++】《Effective C++》第二章

    第二章 构造/析构/赋值运算 条款05:了解C++默默编写并调用哪些函数 默认函数 一般情况下,编译器会为类默认合成以下函数:default构造函数.copy构造函数.non-virtual析构函数. ...

  6. 剑指offer 查找和排序的基本操作:查找排序算法大集合

    重点 查找算法着重掌握:顺序查找.二分查找.哈希表查找.二叉排序树查找. 排序算法着重掌握:冒泡排序.插入排序.归并排序.快速排序. 顺序查找 算法说明 顺序查找适合于存储结构为顺序存储或链接存储的线 ...

  7. 无限重置IDE过期时间插件 亲测可以使用

    相信破解过IDEA的小伙伴,都知道jetbrains-agent这个工具,没错,就是那个直接拖入到开发工具界面,一键搞定,so easy的破解工具!这个工具目前已经停止更新了,尽管还有很多小伙伴在使用 ...

  8. Win 10 Docker安装和简单使用

    Win 10 Docker安装和简单使用 1.环境准备 Docker for Windows需要运行在64位Windows 10 Pro专业版.企业版或教育版(1607年纪念更新,版本14393或更高 ...

  9. 此流非彼流——Stream详解

    Stream是什么? Java从8开始,不但引入了Lambda表达式,还引入了一个全新的流式API:Stream API.它位于java.util.stream包中. Stream 使用一种类似用 S ...

  10. 使用NIM Server网络半自动安装AIX系统

    一.NIM配置 1.安装NIMServer前准备 1.1.配置IP地址 # ifconfig –a #检查当前IP地址# # smitty mktcpip #设置IP地址# 选择第一块网卡(插网线的网 ...