如何编写一个完整的Angular4 FormText 组件

本文主要介绍了如何编写一个完整的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接口

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angular4实现动态添加删除表单输入框功能

    Angular4实现动态添加删除表单输入框功能

    首先介绍一下实现的效果,就是单一表单能实现添加其他的,也能删除 代码如下: <h5>动态添加表单</h5> <div class="form"> <div class="form-group form-group-sm" *ngFor="let i of login"> <label class="col-form-label">用户名</label> &

  • Angular4表单验证代码详解

    Angular4表单验证代码详解

     背景: 最近在itoo页面调整的时候,发现页面表单或者是文本框没有做基本的判断操作,所以着手demo一篇,希望对大家有帮助!! -------------------------------------------------------------------------------- 1.创建表单组件: ng g c login1 2.1单规则验证: <label>用户名:</label> <input type="text" #userNameRe

  • angular4中关于表单的校验示例

    本章中介绍响应式表单的创建及表单输入值的校验,对于模板表单就略过. 一.使用响应式表单的步骤 1.在模块(一般是app.module.ts)中引入ReactiveFormsModule 2.在组件的ts文件中使用响应式表单 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms'; export class ReactiveFormComponent implements OnInit { p

  • 如何编写一个完整的Angular4 FormText 组件

    本文主要介绍了如何编写一个完整的Angular4 FormText 组件,分享给大家,也给自己留个笔记 组件定义 import { Component, Output, Input, forwardRef, EventEmitter} from '@angular/core'; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; @Component({ selector: 'form-text', te

  • 如何通过Android Stduio来编写一个完整的天气预报APP

    如何通过Android Stduio来编写一个完整的天气预报APP

    目录 一.项目概述 二.功能分析 三.开发环境 四.涉及知识点 五.项目演示 六.项目总结 七.项目源码 一.项目概述 本次项目主要实现了天气预报功能.通过调用天气预报接口来获得天气数据,用LIstView和GridView来搭建每个界面,将查询的天气信息存储在SQLiteDatabase中.应用包括了五大界面: 首页面:有各种组件装饰,显示天气.温度.风向及各种指数,还有未来三天的天气城市管理界面:在这里可以对添加的城市进行管理搜索更多城市页面:可以添加想要查看的城市删除城市页面:可以删除已经

  • C#编写一个网游客户端的完整步骤

    C#编写一个网游客户端的完整步骤

    目录 一.认识NetworkStream(网络流) 二.连接服务器 三.客户端向服务器发送数据 四.实现播放背景音乐 五.实现游戏背景图片变换 六.小结 七.参考资料 总结 本过程是使用Virtual Studio 2019实现的,利用老师给出的框架进行的修改. 一.认识NetworkStream(网络流) 1.NetworkStream的相关知识点 ①NetworkStream只能使用于具有TCP/IP协议之中,用于UDP中虽然不会报错,但是会出现异常. ②NetworkStream是面向连接

  • 基于Java编写一个简单的风控组件

    目录 一.背景 1.为什么要做风控 2.为什么要自己写风控 3.其它要求 二.思路 1.风控规则的实现 2.调用方式的实现 三.具体实现 1.风控计数规则实现 2.注解的实现 四.测试一下 1.写法 2.Debug看看 一.背景 1.为什么要做风控 这不得拜产品大佬所赐 目前我们业务有使用到非常多的AI能力,如ocr识别.语音测评等,这些能力往往都比较费钱或者费资源,所以在产品层面也希望我们对用户的能力使用次数做一定的限制,因此风控是必须的! 2.为什么要自己写风控 那么多开源的风控组件,为什么

  • 使用原生js编写一个简单的框选功能方法

    使用原生js编写一个简单的框选功能方法

    今天我们来聊一下怎么使用原生javascript编写一个简单的框选功能. 需求描述 鼠标左键按下不放,移动鼠标出现矩形选框: 鼠标左键松开,根据上边出现的矩形选框统计选框范围内的DOM元素: 嗯...上边的功能描述看着是挺简单的,但实现起来也还是会有些地方需要斟酌思考的.比如,如果我们的框选范围不是document.body,而是某一个div里边进行框选呢?而现实开发过程中,我们会遇上的应该就是第二种情况. 点击查看完整的源码 怎么实现 二话不说,咱们动手写代码吧!因为更好的兼容性,这里就避免了

  • 编写一个javascript元循环求值器的方法

    在上一篇文章中,我们通过AST完成了微信小程序组件的多端编译,在这篇文章中,让我们更深入一点,通过AST完成一个javascript元循环求值器 结构 一个元循环求值器,完整的应该包含以下内容: tokenizer:对代码文本进行词法和语法分析,将代码分割成若干个token parser:根据token,生成AST树 evaluate:根据AST树节点的type,执行对应的apply方法 apply:根据环境,执行实际的求值计算 scope:当前代码执行的环境 代码目录 根据结构看,我将代码目录

  • 通过Golang编写一个AES加密解密工具

    通过Golang编写一个AES加密解密工具

    目录 前言 AES加密介绍及实现原理 AES用在哪里 AES加密是如何实现的 AES加密模式 Go实现AES加密工具scode 前言 本文包含如下两个内容: AES加密介绍及实现原理 Go实现AES加密和解密工具 AES加密介绍及实现原理 AES( advanced encryption standard)使用相同密钥进行加密和解密,也就是对称加密.其他的对称加密如DES,由于DES密钥长度只有56位如今的算力甚至可以在5分钟内破解,而AES最高级别达到了256位密钥长度,如果采用穷举法,目前来

  • 详解SpringBoot项目整合Vue做一个完整的用户注册功能

    目录 前言 1 实现用户注册流程 1.1 用户注册完整流程 1.2 用户注册信息及校验 2 后台接口设计 2.1 上传头像接口 2.2 用户注册接口 3 后端代码实现 3.1 用户头像上传接口编码实现 3.2 用户注册接口 4 前端代码实现 4.1 完成用户注册界面vue组件编码 4.2 工具类中增加校验方法 4.3 API文件中添加用户注册方法 4.4 全局方法中添加用户注册方法 4.5 路由列表中添加用户注册组件 4.6 登录组件中添加用户注册的跳转链接 4.7 路由跳转控制中添加白名单 5

  • 使用vue编写一个点击数字计时小游戏

    使用vue编写一个点击数字计时小游戏,列入你在文本框中输入3,点击开始会生成一个3行3列的表格,表格数据为1-9随机排列,这时候从1开始点击,按顺序点到9,当按正确顺序点击完毕,会提示所用的时间,如果顺序没有按对,会提示游戏结束. 1.首先下载vue源码,下载地址http://cn.vuejs.org 2.jquery是在面向dom操作,而vue是面向数据操作的,所以使用vue最好不要去操作dom,尽量发挥出vue的独到之处,(如果使用过angularjs可能更容易理解) 3.建立一个普通的ht

  • 实现一个完整的Node.js RESTful API的示例

    前言 这篇文章算是对Building APIs with Node.js这本书的一个总结.用Node.js写接口对我来说是很有用的,比如在项目初始阶段,可以快速的模拟网络请求.正因为它用js写的,跟iOS直接的联系也比其他语言写的后台更加接近. 这本书写的极好,作者编码的思路极其清晰,整本书虽说是用英文写的,但很容易读懂.同时,它完整的构建了RESTful API的一整套逻辑. 我更加喜欢写一些函数响应式的程序,把函数当做数据或参数进行传递对我有着莫大的吸引力. 从程序的搭建,到设计错误捕获机制

随机推荐