实现完整的Angular4 FormText组件需要哪些步奏

这次给大家带来实现完整的Angular4 FormText组件需要哪些步奏，实现完整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: `  
    {{label}}：      
 `, providers: [  {   provide:NG_VALUE_ACCESSOR,   useExisting:forwardRef(()=>FormTextComponent),   multi:true  } ]})export class FormTextComponent implements ControlValueAccessor {  @Input() label:string = ''; @Input() placeholder: string=''; @Output() onChange: EventEmitter = new EventEmitter();  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) {  // }}

登录后复制

组件使用

{{mobile}}

登录后复制

需要注意的点：

需要配置组件的providers
需要实现ControlValueAccessor接口                                        

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

js如何匹配计算font-size

操作modal单次加载数据

以上就是实现完整的Angular4 FormText组件需要哪些步奏的详细内容，更多请关注【创想鸟】其它相关文章！