[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
相关文章
- 【错误记录】Kotlin 编译报错 ( Not nullable value required to call an ‘iterator()‘ method on for-loop range )
- ORA-02218: invalid INITIAL storage option value ORACLE 报错 故障修复 远程处理
- ORA-24162: name value pair list is full, cannot add another entry ORACLE 报错 故障修复 远程处理
- ORA-26660: Invalid action context value for string ORACLE 报错 故障修复 远程处理
- ORA-26814: The value for argument string exceeds maximum string ORACLE 报错 故障修复 远程处理
- ORA-32021: parameter value longer than string characters ORACLE 报错 故障修复 远程处理
- ORA-38801: improper value for ORA_EDITION ORACLE 报错 故障修复 远程处理
- MySQL Error number: 4160; Symbol: ER_INSTALL_COMPONENT_SET_NULL_VALUE; SQLSTATE: HY000 报错 故障修复 远程处理
- ORA-12419: null binary label value ORACLE 报错 故障修复 远程处理
- Oracle 视图 DBA_APPLY_VALUE_DEPENDENCIES 官方解释,作用,如何使用详细说明
- Illegal unquoted character ((CTRL-CHAR, code X)): has to be escaped using backslash to be included in string value详解编程语言
- php array_push 与 $arr[]=$value 性能比较详解编程语言
- How to Find the Maximum Value in a MySQL Table: Tips and Tricks(mysql表最大值)
- 查询Redis的Value一探究竟(查redis的value)
- SqlServer2012中First_Value函数简单分析