如何編寫一個完整的Angular4 FormText 組件

更新時間：2017年11月18日 16:33:58 作者：mntx

本篇文章主要介紹了如何編寫一個完整的Angular4 FormText 組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文主要介紹了如何編寫一個完整的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>

需要注意的點(diǎn)：

1.需要配置組件的providers
2.需要實(shí)現(xiàn)ControlValueAccessor接口

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解AngularJS1.6版本中ui-router路由中/#!/的解決方法
本篇文章主要介紹了詳解AngularJS1.6版本中ui-router路由中/#!/的解決方法，非常具有實(shí)用價值，需要的朋友可以參考下
2017-05-05
angular實(shí)現(xiàn)form驗(yàn)證實(shí)例代碼
本篇文章主要介紹了angular實(shí)現(xiàn)form驗(yàn)證實(shí)例代碼，具有一定的參考價值，有興趣的可以了解一下。
2017-01-01
玩轉(zhuǎn)Koa之koa-router原理解析
本文將要分析的是經(jīng)常用到的路由中間件 -- koa-router，詳細(xì)的介紹了koa-router概述和實(shí)現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
詳解Angular項(xiàng)目中共享模塊的實(shí)現(xiàn)
本文主要介紹了Angular的共享模塊的實(shí)現(xiàn)，對此感興趣的同學(xué)，可以實(shí)驗(yàn)一下
2021-05-05
詳解Angular 4.x NgTemplateOutlet
這篇文章主要介紹了詳解Angular 4.x NgTemplateOutlet,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
AngularJS1.X學(xué)習(xí)筆記2-數(shù)據(jù)綁定詳解
本篇文章主要介紹了AngularJS1.X學(xué)習(xí)筆記2-數(shù)據(jù)綁定詳解，具有一定的參考價值，有興趣的可以了解一下。
2017-04-04
如何用angularjs制作一個完整的表格
本文給大家分享的是使用angularjs制作一個完整的表格的真實(shí)案例，結(jié)合前幾篇的內(nèi)容，把整個完整的代碼分享給大家，有需要的小伙伴可以參考下
2016-01-01
AngularJS通過$location獲取及改變當(dāng)前頁面的URL
本篇將介紹AngularJS中的$location服務(wù)的基本用法,$location服務(wù)的主要作用是用于獲取當(dāng)前url以及改變當(dāng)前的url,并且存入歷史記錄。本文通過示例代碼介紹的很詳細(xì)，有需要的朋友們可以參考借鑒，下面來一起看看吧。
2016-09-09
Angular2學(xué)習(xí)筆記之?dāng)?shù)據(jù)綁定的示例代碼
本篇文章主要介紹了Angular2學(xué)習(xí)筆記之?dāng)?shù)據(jù)綁定的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
AngularJS基于ui-route實(shí)現(xiàn)深層路由的方法【路由嵌套】
這篇文章主要介紹了AngularJS基于ui-route實(shí)現(xiàn)深層路由的方法,涉及AngularJS路由嵌套操作相關(guān)實(shí)現(xiàn)步驟與技巧,需要的朋友可以參考下
2016-12-12