angular4 自定义表单组件
自定义表单组件分为单值组件和多值组件.
单值组件:input/select/radio/textarea
多值组件:checkbox/tree组件
条件:
1.必须实现ControlValueAccessor接口
不同输入控件的数据更新方式不一样。
比如input是设置value值,而checkbox是设置checked属性。
因此不同类型的输入控件都有一个ControlValueAccessor来更新视图
export interface ControlValueAccessor{
writeVlaue(obj:any) :void; //model->view
registerOnchange(fn:any) :void; //view->model
registerOnTouched(fn:any):void;
setDisabledState?( isDisabled:boolean):void
}
//实现 writeValue(value:any){
if(value!=this.innerVal){
this.innerVal=value;
}
}
2.必须注册成为表单组件(使用providers属性)
注释:
1.provide:将组件注册到DI框架,让其成为一个可被表单访问的组件
2.useExisting:让组件暴露对应的validatate方法实现表单验证
3.multi:为true时表示这个token对应多个依赖项,可在多个表单里使用,互不影响
@Component({
selector:'nw-input',
templateUrl:'./nw-input.component.html',
styleUrls:'./nw-input.component.scss',
providers:[
provide:NG_VALUE_ACCESSOR,
useExisting:forwardRef(()=>nwInputComponent),
multi:true
]
})
具体实现:
1.如果是单值表单组件,使用FormControl
//nw-select.component.ts @Component({
selector:'nw-select',
templateUrl:'./nw-select.component.html',
styleUrls:'./nw-select.component.scss',
providers:[
provide:NG_VALUE_ACCESSOR,
useExisting:forwardRef(()=>NwSelectComponent),
multi:true
]
}) export class NwSelectComponent implements ControlValueAccessor{
selectFormControl:FormControl=new FormControl(); getControl(vfn:ValidatorFn[]):FormControl{
if(!this.selectFormControl){
this.selectFormControl=new FormControl('',vfn)
}
return this.selectFormControl
}
}
//xx.component.ts export class xxComponent implements OnInit {
thatForm:formGroup;
@ViewChild('xxComp')
xxComp:NwSelectComponent; ngOnInit(){
xx:this.xxComp.getControl([Validator.required,Validators.minLength(5)]) //验证条件还是数组
}
}
2.如果是多值表单组件,使用FormArray
//nw-checkbox.component.ts @Component({
selector:'nw-checkbox',
templateUrl:'./nw-checkbox.component.html',
styleUrls:'./nw-checkbox.component.scss',
providers:[
provide:NG_VALUE_ACCESSOR,
useExisting:forwardRef(()=>NwCheckboxGroupComponent),
multi:true
]
}) export class NwCheckboxGroupComponent implements ControlValueAccessor{
checkboxFormArray:FormArray=new FormArray([]); getControls(vfn:ValidatorFn):FormArray{
if(!this.checkboxkFormArray){
this.checkboxFormArray=new FormArray([],vfn);
}
}
cleanControls(){
while(this.checkboxFormArray.controls.length!==0){
this.checkboxFormArray.removeAt(0)
}
pushControl(id:any){
this.checkboxFormArray.push(new FormControl(id))
}
}
}
//xx.component.ts export class xxComponent implements OnInit {
thatForm:FormGroup;
@ViewChild(xxComp)
xxComp:NwCheckboxGroupComponent; ngOnInit(){
this.thatFom=this.formBuilder.group({
xx:this.xxComp.getControls(Valitators.required) //验证条件不再允许数组了
})
}
}
angular4 自定义表单组件的更多相关文章
- Vue组件之自定义表单组件
今天又看了一遍vue的文档,记得之前学习的时候,官方文档中有提过,v-model指令是一个语法糖,做两件事,一个是给表单控件元素绑定value,第二个是当输入时更新绑定的值,不过后来在"表单 ...
- 实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
- angular4 自定义表单验证Validator
表单的验证条件有时候满足不了需求就可以自定义验证 唯一要求返回是ValidatorFn export interface ValidatorFn{ (c:AbstractControl):Valida ...
- Angular4——7.表单处理
在Angular中存在两种表单处理方式: 模版驱动式表单 表单的数据模型是通过组件模版中的相关指令来定义的.由于使用这种方式定义表单的数据模型时,我们会受限于HTML的语法,所以,模版驱动方式只适用于 ...
- 【.net+jquery】绘制自定义表单(含源码)
前言 两年前在力控的时候就想做一个类似的功能,当时思路大家都讨论好了,诸多原因最终还是夭折了.没想到两年多后再这有重新提出要写一个绘制表单的功能.对此也是有点小激动呢?总共用时8.5天的时间基本功能也 ...
- Orchard创建自定义表单
本文链接:http://www.cnblogs.com/souther/p/4520130.html 主目录 自定义表单模块可以用来获取网站前台用户的信息.自定义表单需要与一个内容类型结合使用.它可以 ...
- Angular19 自定义表单控件
1 需求 当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件:自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前 ...
- Winform自定义表单(转)
出处:http://www.newlifex.com/showtopic-167.aspx 好吧,附件真的损坏了,原始代码我也没有了,再提取我也没精力了,不好意思,哪位之前下过可以重发一遍吗?不过即使 ...
- ZKEACMS 自定义表单的使用
ZKEACMS Core 2.2 已经发布了,其中主要添加了自定义表单的功能.使用自定义表单的功能,您可以在几分钟内就创建一个表单,并用它来收集一些信息.导出收集的信息,就可以做一些统计分析. 创建表 ...
随机推荐
- Python-面向对象之封装与多态
目录 组合 什么是组合 使用组合的目的 如何使用组合 封装 什么是封装 为什么要封装 如何封装 访问限制机制 什么是访问限制机制 访问限制机制的目的 如何使用访问限制 property 什么是prop ...
- VC操作Excel之基本操作(颜色等)【转载】
文章出处https://blog.csdn.net/form88/article/details/78566390 EXCEL里如何知道某种颜色的ColorIndex的值 ===fag::====== ...
- java基础之Math类
Math类概述Math 类包含用于执行基本数学运算的方法,如初等指数.对数.平方根和三角函数. 成员方法 public static int abs(int a):绝对值 public static ...
- C# GDI+编程(二)
常用的绘图函数 DrawArc绘制一个弧形 示例:graphics.DrawArc(pen,,,,,,) 倒数第二个参数,表示起始度数,最后一个参数是弧形的跨越度数.比如起始度数是90,跨越度数是12 ...
- 05-1-操作css样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Codeforces 500D. New Year Santa Network
题目大意 给你一颗有\(n\)个点的树\(T\),边上有边权. 规定,\(d(i,j)\)表示点i到点j路径上的边权之和. 给你\(q\)次询问,每次询问格式为\(i, j\),表示将按输入顺序排序的 ...
- Leetcode240. Search a 2D Matrix II搜索二维矩阵2
编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target.该矩阵具有以下特性: 每行的元素从左到右升序排列. 每列的元素从上到下升序排列. 示例: 现有矩阵 matrix ...
- hdu1693 Eat the Trees [插头DP经典例题]
想当初,我听见大佬们谈起插头DP时,觉得插头DP是个神仙的东西. 某大佬:"考场见到插头DP,直接弃疗." 现在,我终于懂了他们为什么这么说了. 因为-- 插头DP很毒瘤! 为什么 ...
- 廖雪峰Java10加密与安全-5签名算法-2DSA签名算法
DSA DSA:Digital Signature Algorithm,使用EIGamal数字签名算法,和RSA数字签名相比,DSA更快. DSA只能配合SHA使用: SHA1withDSA SHA2 ...
- [编织消息框架][netty源码分析]11 ByteBuf 实现类UnpooledHeapByteBuf职责与实现
每种ByteBuf都有相应的分配器ByteBufAllocator,类似工厂模式.我们先学习UnpooledHeapByteBuf与其对应的分配器UnpooledByteBufAllocator 如何 ...