如何编写一个完整的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对象的函数
Dec 22 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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下使用SMTP发邮件的代码
2008/01/10 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
php获取随机数组列表的方法
2014/11/13 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
JQUERY操作JSON实例代码
2010/02/09 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
Angular实现响应式表单
2017/08/04 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
公司人力资源的自我评价
2014/01/02 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
路政管理求职信
2014/06/18 职场文书
公司授权委托书范文
2014/08/02 职场文书
自主招生自荐信格式
2015/03/04 职场文书
法律意见书范文
2015/05/20 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript