[Angular2 Form] Create custom form component using Control Value Accessor
//switch-control component import { Component } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators} from '@angular/forms'; @Component({
selector: 'switch-control',
templateUrl: './switch-control.component.html',
styleUrls: ['./switch-control.component.css'],
providers: [
{provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SwitchControlComponent}
]
})
export class SwitchControlComponent implements ControlValueAccessor {
isOn: boolean;
_onChange: (value: any) => void; writeValue(value: any) {
this.isOn = !!value;
} registerOnChange(fn: (value: any) => void) {
this._onChange = fn;
} registerOnTouched() {} toggle(isOn: boolean) {
this.isOn = isOn;
this._onChange(isOn);
}
}
The writeValue function allows you to update your internal model with incoming values, for example if you use ngModel to bind your control to data.
The registerOnChange accepts a callback function which you can call when changes happen so that you can notify the outside world that the data model has changed. Note that you call it with the changed data model value.
The registerOnTouched function accepts a callback function which you can call when you want to set your control to touched. This is then managed by Angular 2 by adding the correct touched state and classes to the actual element tag in the DOM.
Using it:
this.signupForm = fb.group({
password: [
'',
Validators.required
],
confirm: [
'',
[
Validators.required,
confirmPasswords.bind(undefined, this.signup)
]
],
newsletter: true
});
<form novalidate autocomplete="off" [formGroup]="signupForm">
<div class="form-field">
<label>Password:</label>
<input type="text" formControlName="password" [(ngModel)]="signup.password" name="password">
</div>
<div class="form-field">
<label>Confirm Password: </label>
<input type="text" formControlName="confirm" [(ngModel)]="signup.confirm" name="confrim">
<div *ngIf="!signupForm.valid">
<span *ngIf="signupForm.get('confirm').hasError('confirmPassword') && signupForm.get('confirm').touched">
{{signupForm.get('confirm').errors?.confirmPassword.message}}
</span>
<span *ngIf="signupForm.get('confirm').hasError('required') && signupForm.get('confirm').dirty">This field is requred</span>
</div>
<switch-control formControlName="newsletter"></switch-control>
</div>
</form>
Here in the code we set the default value to be true thought "writeValue" method handle by angular2, also we get updated value from the component thought "registonChange" method.
Link: http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel
Github: https://github.com/kara/ac-forms/tree/master/src/app/switch-control
最新文章
- 启动Tomcat内存溢出解决:java.lang.OutOfMemoryError: PermGen space
- 立体匹配:关于用OpenCV彩色化middlebury网站给定的视差
- 转:RTC搭建android下三层应用程序访问服务器MsSql-服务器端
- [办公自动化] 再读《让EXCEL飞》(从excel导入access数据时,union联合查询,数据源中没有包含可见的表格)
- hiho 第116周,最大流最小割定理,求最小割集S,T
- 初始Hibernate框架技术
- HTML5的placeholder属性如何实现换行
- kafka中server.properties配置文件参数说明
- 《跨终端Web》读书笔记
- css3动画使用技巧之——transform-delay为负值时的应用。
- viewpager+fragment学习笔记
- iOS:UI系列之UIScrollview和UIPagecontrol
- python针对于mysql的增删改查
- eclipsecpp从可执行程序员中导入源代码并调试
- VINS 估计器之结构初始化
- 从外面更新unity需要用的题库
- HTML 理解标签 - 帧
- cat正常,cat重定向到文件可能是乱码;解决办法
- 如何使用 SSH 连接 VMWare 虚拟机中的 Ubuntu
- NormalMap 贴图 【转】
热门文章
- init进程
- c++操作当前窗体句柄
- POJ 1738 An old Stone Game(石子合并 经典)
- 【2017 Multi-University Training Contest - Team 6】Kirinriki
- 记一次搬迁到 OpenShift 并搭建 PHP5.5 环境等
- libiconv 支持的编码
- 18. springboot整合jsp
- 1.7 Python基础知识 - 模块初识
- php-wamp环境搭建
- [D3] Animate Chart Axis Transitions in D3 v4