如何编写一个完整的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 相关文章推荐
影响jQuery使用的14个方面
Sep 01 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
webpack打包多页面的方法
Nov 30 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 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
咖啡常见的种类
2021/03/03 新手入门
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
PHP 危险函数全解析
2009/09/09 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
yii中widget的用法
2014/12/03 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
python中pyplot基础图标函数整理
2020/11/10 Python
Python 列表反转显示的四种方法
2020/11/16 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
西部世纪面试题
2014/12/05 面试题
.NET面试问题集
2015/12/08 面试题
税务专业毕业生自荐信
2013/11/10 职场文书
开办饭店创业计划书
2013/12/28 职场文书
六年级学生评语
2014/04/22 职场文书
抽样调查项目计划书
2014/04/24 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers