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

单值组件: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. WPF 免费控件库(2)

    最近在逛园子的时候发现的园友分享或提及的WPF控件库~ (1) Bootstrap WPF Style,Bootstrap风格的WPF样式 转:http://www.cnblogs.com/tsliw ...

  2. A*算法——第K短路

    例题 JZOJ senior 1163第K短路 题目描述 Bessie 来到一个小农场,有时她想回老家看看她的一位好友.她不想太早地回到老家,因为她喜欢途中的美丽风景.她决定选择K短路径,而不是最短路 ...

  3. HTML - 框架标签相关

    <html> <head></head> <!-- frameset 框架标签 cols : 按照列进行区域的切分 rows : 按照行进行区域的切分 fra ...

  4. 定时ping取返回值并绘图

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  5. mac使用ssh出现permission denied(publickey)

    看出错信息是权限太开放的问题,google了一下,修改权限,不只是需要修改 .pem 文件的权限,还需要修改.ssh目录和用户目录 chmod go-w ~/ chmod ~/.ssh chmod ~ ...

  6. 08-background详解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. HZOI20190906模拟38 金,斯诺,赤

    题面:https://www.cnblogs.com/Juve/articles/11479415.html T1:高精度gcd,其实不用写高精度取模,gcd还有一种求法 int gcd(int a, ...

  8. Nopi 导出设置行高

    1.导出excel行显示不完整数据客户不满意,需要我们处理 ; rowNum <= sheet.LastRowNum; rowNum++) { HSSFRow currentRow = shee ...

  9. Web API 接口说明文档

    1.采用 Web API Help Page 显示效果 2.swaggerui 创建文档接口 效果图 3.swagger ui 安装配置 nuget 安装 2.设置xml文件 3.配置根路径 预览sw ...

  10. 工控安全入门(四)—— DNP3协议

    我们之前看过了法国施耐德的Modbus.德国西门子的S7comm,这次就让我们把目光投到美洲,看看加拿大的HARRIS的DNP3有什么特别之处. 这次选用的流量包部分来自w3h的gitbub: htt ...