如何编写一个完整的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 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
js浮动图片的动态效果
Jul 10 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 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开发框架总结收藏
2008/04/24 PHP
php zend 相对路径问题
2009/01/12 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
PHP count()函数讲解
2019/02/03 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
python删除特定文件的方法
2015/07/30 Python
详解Python中的文件操作
2016/08/28 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
django 多数据库及分库实现方式
2020/04/01 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
企业宗旨标语
2014/06/10 职场文书
北京奥运会主题口号
2014/06/13 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
公司人力资源管理制度
2015/08/05 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技