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

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

本文主要介绍了如何编写一个完整的Angular4 FormText 组件，分享给大家，也给自己留个笔记

组件定义

import { ComponjMNtytent, Output, Input, forwardRef, EventEmitter} from '@angular/core';

import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

@Component({

selector: 'form-text',

template: `

{{label}}：

placeholder="{{placeholder}}" >

`,

providers: [

{

provide:NG_VALUE_ACCESSOR,

useExisting:forwardRef(()=>FormTexthttp://Component),

multi:true

}

]

})

export class FormTextComponent implements ControlValueAccessor {

@Input() label:string = '';

@Input() placeholder: string='';

@Output() onChange: EventEmitter = new EventEmitter();

public innerValue: any;

public changeFn: http://Function = () => {};

get value(): any {

return this.innerValue;

};

set value(v: any) {

if (v !== this.innerValue) {

this.innerValue = v;

this.changeFn(v);

}

}

writeValue(value: any) {

jMNtyt if (value !== this.innerValue) {

this.innerValue = value;

}

}

registerOnChange(fn: any) {

this.changeFn = fn;

}

registerOnTouched(fn: any) {

//

}

}

组件使用

{{mobile}}

需要注意的点：

1.需要配置组件的providers

2.需要实现ControlValueAccessor接口

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。