如何编写一个完整的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中对表单的基本操作代码
Jul 29 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
js定时器实例分享
Dec 20 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 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 session 检测和注销
2009/03/16 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
JavaScript中的私有成员
2006/09/18 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
python3实现短网址和数字相互转换的方法
2015/04/28 Python
Python实现的端口扫描功能示例
2018/04/08 Python
python爬取网易云音乐评论
2018/11/16 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
特教教师先进事迹
2014/05/21 职场文书
实验心得体会
2014/09/05 职场文书
店面出租协议书范本
2014/11/28 职场文书
人与自然观后感
2015/06/16 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书