如何编写一个完整的Angular4 FormText 组件


Posted in Javascript onNovember 18, 2017

本文主要介绍了如何编写一个完整的Angular4 FormText 组件,分享给大家,也给自己留个笔记

组件定义

import { Component, Output, Input, forwardRef, EventEmitter} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

@Component({
 selector: 'form-text',
 template: `
  <div >
    <label>{{label}}:</label>
    <input type="text" [(ngModel)]="value"
    placeholder="{{placeholder}}" >
  </div>
 `,
 providers: [
  {
   provide:NG_VALUE_ACCESSOR,
   useExisting:forwardRef(()=>FormTextComponent),
   multi:true
  }
 ]
})
export class FormTextComponent implements ControlValueAccessor {
 
 @Input() label:string = '';
 @Input() placeholder: string='';

 @Output() onChange: EventEmitter<any> = new EventEmitter<any>();
 
 public innerValue: any;
 public changeFn: Function = () => {};
 

 get value(): any {
  return this.innerValue;
 };

 set value(v: any) {
  if (v !== this.innerValue) {
   this.innerValue = v;
   this.changeFn(v);
  }
 }


 writeValue(value: any) {
  if (value !== this.innerValue) {
   this.innerValue = value;
  }
 }

 registerOnChange(fn: any) {
  this.changeFn = fn;
 }

 registerOnTouched(fn: any) {
  //
 }

}

组件使用

<form-text [(ngModel)]="mobile" [placeholder]="placeholder" [label]="label"></form-text>
<p>{{mobile}}</p>

需要注意的点:

1.需要配置组件的providers
2.需要实现ControlValueAccessor接口

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
jQuery自定义数值抽奖活动代码
Jun 11 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
js 作用域和变量详解
Feb 16 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
Angular 向组件传递模板的两种方法
Feb 23 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
Angular中支持SCSS的方法
Nov 18 #Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 #Javascript
jQuery实现checkbox的简单操作
Nov 18 #jQuery
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 #Javascript
基于jquery实现五星好评
Nov 18 #jQuery
基于JavaScript实现五子棋游戏
Aug 26 #Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 #Javascript
You might like
PHP 单引号与双引号的区别
2009/11/24 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
python 输出一个两行字符的变量
2009/02/05 Python
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
python中对_init_的理解及实例解析
2019/10/11 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
解除劳动合同协议书
2014/04/14 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
灵山大佛导游词
2015/02/04 职场文书
2015年工会工作总结
2015/03/30 职场文书
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL
Golang入门之计时器
2022/05/04 Golang