如何编写一个完整的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 相关文章推荐
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
整理一下常见的IE错误
Nov 18 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
javascript中的this作用域详解
Jul 15 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
Element MessageBox弹框的具体使用
Jul 27 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
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 读取文件乱码问题
2010/02/20 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
php打开文件fopen函数的使用说明
2013/07/05 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
javascript闭包的高级使用方法实例
2013/07/04 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
Django操作session 的方法
2020/03/09 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
python自动化发送邮件实例讲解
2021/01/04 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
安踏广告词改编版
2014/03/21 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
婚宴邀请函
2015/01/30 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
MySQL优化之慢日志查询
2022/06/10 MySQL