自定义表单组件分为单值组件和多值组件.

单值组件: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 自定义表单组件的更多相关文章

  1. Vue组件之自定义表单组件

    今天又看了一遍vue的文档,记得之前学习的时候,官方文档中有提过,v-model指令是一个语法糖,做两件事,一个是给表单控件元素绑定value,第二个是当输入时更新绑定的值,不过后来在"表单 ...

  2. 实现Ant Design 自定义表单组件

    Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...

  3. angular4 自定义表单验证Validator

    表单的验证条件有时候满足不了需求就可以自定义验证 唯一要求返回是ValidatorFn export interface ValidatorFn{ (c:AbstractControl):Valida ...

  4. Angular4——7.表单处理

    在Angular中存在两种表单处理方式: 模版驱动式表单 表单的数据模型是通过组件模版中的相关指令来定义的.由于使用这种方式定义表单的数据模型时,我们会受限于HTML的语法,所以,模版驱动方式只适用于 ...

  5. 【.net+jquery】绘制自定义表单(含源码)

    前言 两年前在力控的时候就想做一个类似的功能,当时思路大家都讨论好了,诸多原因最终还是夭折了.没想到两年多后再这有重新提出要写一个绘制表单的功能.对此也是有点小激动呢?总共用时8.5天的时间基本功能也 ...

  6. Orchard创建自定义表单

    本文链接:http://www.cnblogs.com/souther/p/4520130.html 主目录 自定义表单模块可以用来获取网站前台用户的信息.自定义表单需要与一个内容类型结合使用.它可以 ...

  7. Angular19 自定义表单控件

    1 需求 当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件:自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前 ...

  8. Winform自定义表单(转)

    出处:http://www.newlifex.com/showtopic-167.aspx 好吧,附件真的损坏了,原始代码我也没有了,再提取我也没精力了,不好意思,哪位之前下过可以重发一遍吗?不过即使 ...

  9. ZKEACMS 自定义表单的使用

    ZKEACMS Core 2.2 已经发布了,其中主要添加了自定义表单的功能.使用自定义表单的功能,您可以在几分钟内就创建一个表单,并用它来收集一些信息.导出收集的信息,就可以做一些统计分析. 创建表 ...

随机推荐

  1. js怎样截取字符串后几位以及截取字符串前几位

    想要截取字符串前几位与后几位,主要代码如下 截取字符串前几位 var disName ='开心一族漂亮家园'; var shortName = disName.substring(0,5); cons ...

  2. python中遇到的问题:IndentationError: unexpected indent

    在Python中写下列代码的时候,出现错误:IndentationError: unexpected indent 分析:IndentationError是缩进的错误,查看源代码发现names开始的这 ...

  3. 在python3中的编码

    在python3中的编码 #_author:Administrator#date:2019/10/29import sysprint(sys.getdefaultencoding())#utf-8 打 ...

  4. centos6 php7 安装 memcache 和 memcached

    下载安装memcache 注意:官网的memcache包,暂时好像不支持php7.所以到下面地址下载memcache包,切换到php7分支 php7 memcache github 下载地址 官网下载 ...

  5. Vue生命周期的执行过程(面试必备) 极简版

    最近准备面试,临时抱佛脚的来回顾一下vue相关的面试题,当然这是不对的,平时还是要努力呀,走起: 1.创建vue实例,Vue(); 2.在创建Vue实例的时候,执行了init(),在init过程中首先 ...

  6. 我王某的 低错&&(女装)Flag

    日月共鉴,人心同睹. 喜欢你. 喜欢你的眼睛. 春天银河般闪烁的双瞳.春日阳光般温柔的眼神. 喜欢你的头发. 在微风中飘拂丝绢般柔滑的长发. 喜欢你的嘴唇. 给我甜蜜的吻.吐出忧伤叹息的嘴唇. 喜欢你 ...

  7. nginx 遇见问题与解决问题

    如果你的安装目录为/usr/local/nginx,那么nginx的错误日志目录就是/usr/local/nginx/logs/error.log. 2.如果error.log不存在 就进入 # vi ...

  8. opencv-Mat数据类型及位数总结

    转自:http://blog.sina.com.cn/s/blog_662c7859010105za.html 在OpenCV里面,许多数据结构为了达到內存使用的最优化,通常都会用它最小上限的空间来分 ...

  9. LintCode_13 字符串查找

    题目 对于一个给定的 source 字符串和一个 target 字符串,你应该在 source 字符串中找出 target 字符串出现的第一个位置(从0开始).如果不存在,则返回 -1. 您在真实的面 ...

  10. C++写矩阵的转置

    (2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2017年2月5日) 对于任意非n阶矩阵的转置,用c++应该怎么写代码,思考了一下,发现并没有那么简单,上网找到了一个比较好 ...