[Angular] Implement a custom form component by using control value accessor
We have a form component:
<label>
<h3>Type</h3>
<workout-type
formControlName="type"
></workout-type>
</label> form = this.fb.group({
name: ['', Validators.required],
type: 'strength'
}); constructor(
private fb: FormBuilder
) {}
the 'type' FormControl will be a custom form element component which refers to 'workout-type' componet.
For the workout-type component:
import {ChangeDetectionStrategy, Component, forwardRef} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; // Register the control value accessor export const TYPE_CONTROL_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => WorkoutTypeComponent)
}; @Component({
selector: 'workout-type',
providers: [TYPE_CONTROL_ACCESSOR],
changeDetection: ChangeDetectionStrategy.OnPush,
styleUrls: ['workout-type.component.scss'],
template: `
<div class="workout-type">
<div
*ngFor="let selector of selectors"
[class.active]="selector === value"
(click)="setSelected(selector)"
class="workout-type__pane">
<img src="/img/{{selector}}.svg" alt="{{selector}}">
<p>
{{selector}}
</p>
</div>
</div>
`
})
export class WorkoutTypeComponent implements ControlValueAccessor{ selectors = ['strength', 'endurance'];
private onTouch: Function;
private onModelChange: Function;
private value: string; constructor() { } writeValue(value: string): void {
this.value = value;
} registerOnChange(fn: Function): void {
this.onModelChange = fn;
} registerOnTouched(fn: Function): void {
this.onTouch = fn;
} setSelected(value: string): void {
this.value = value;
this.onModelChange(value);
this.onTouch();
}
}
[Angular] Implement a custom form component by using control value accessor的更多相关文章
- [Angular2 Form] Create custom form component using Control Value Accessor
//switch-control component import { Component } from '@angular/core'; import { ControlValueAccessor, ...
- [Angular] Adding keyboard events to our control value accessor component
One of the most important thing when building custom form component is adding accessbility support. ...
- [Angular2 Form] Angular 2 Template Driven Form Custom Validator
In this tutorial we are going to learn how we can also implement custom form field validation in Ang ...
- Angular 学习笔记 (Custom Accessor + Mat FormField + Custom select)
custom form control 之前就写过了,这里简单写一下. 创建一个组件实现 ControlValueAccessor 接口 @Component({ providers: [ { pro ...
- How to: Implement a Custom Base Persistent Class 如何:实现自定义持久化基类
XAF ships with the Business Class Library that contains a number of persistent classes ready for use ...
- UE4 Tutorial - Custom Mesh Component 用于绘制自定义网格的插件CustomMeshComponent
UE4 中用于绘制自定义网格的插件CustomMeshComponent. 转载: UE4 Tutorial - Custom Mesh Component Over the last few w ...
- [MDX] Build a Custom Provider Component for MDX Deck
MDX Deck is a great library for building slides using Markdown and JSX. Creating a custom Providerco ...
- [React] Validate Custom React Component Props with PropTypes
In this lesson we'll learn about how you can use the prop-types module to validate a custom React co ...
- Vue Login Form Component
Vue Login Form Component Account Login <template> <div> <slot></slot> <el ...
随机推荐
- C++ lambda表达式 (二)
#include <functional> #include <iostream> int main() { using namespace std; int i = 3; i ...
- EditPlus,UltraEdit等编辑器列选择的方法
在使用富文本编辑器的时候,通常模式是行选择状态,由于今天想使用EditPlus列选择状态, 于是通过在网上收集的资料,总结出相关富文本编辑器的列选择的方法. EditPlus 1)菜单:编辑 -&g ...
- 关于Shiro的退出请求是如何关联到登录请求的思考
一.结论 先给出结论,是因为本身是很简单的道理.假设我们没有使用任何认证授权的框架,就简单的使用Cookie和HttpSession,那么用户登录后的每一个请求是如何关联上这个用户的呢?答案很简单,由 ...
- J2EE之13个规范标准概念
主要是关于j2EE十三个规范的总结. java基础知识 首先java分为三类:J2ME.J2SE.J2EE. 依据开发软件的大小和量级他们的作用分别不同,J2ME是开发为机顶盒.移动电话和PDA之类嵌 ...
- SSM(spring,springMVC,Mybatis)框架的整合
这几天想做一个小项目,所以搭建了一个SSM框架. 1.基本概念 1.1.Spring Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Joh ...
- 设置select组件中的默认值
会员卡类型 <select id="name2" style="width:140px"> <option value="Ak& ...
- docker -mysql服务设置远程连接 解决1251 client does not support ..问题
前提: 安装MYSQL实例 docker pull mysql 启动mysql(做了端口映射) [root@localhost ~]# docker run -p 3306:3306 --name m ...
- Onvif开发之服务端发现篇
服务端的开发相对来说比客户端稍微难一点,也就是给填充相关结构体的时候,需要一点一点的去查阅,验证各个结构中各个成员各自代表什么意思,以及对应的功能需要是那个接口实现,这是开发服务端最头疼的事情.(在开 ...
- 利用css去除input按钮上的文字的几种方法
相信很多时候input上的文字困扰着web前端开发者,必须要通过修改html代码中的value值才能清空按钮上的文字,但很多人不愿意去动html代码,一方面麻烦,另外主要的原因还在于保留文字对seo有 ...
- c#中 xml和json 互相转换
--xml转json XmlDocument doc = new XmlDocument(); doc.LoadXml(result); string json = Newtonsoft.Json.J ...