[英]How To Use A Directive In A Custom Input With ControlValueAccessor Angular
[英]How to use ControlValueAccessor?
我有一个带有反应形式的自定义组件InputField
和SignupComponent
。
<ui-input-field formControlName="email" label="email"></ui-input-field>
当我这样做时,我在ui-input-field
获得formControlName
,而不是在标签input
。 怎么解决呢?
我使用ControlValueAccessor
但不了解其工作原理(方法writeValue()
)
import { Component, forwardRef, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'ui-input-field',
template: `
<div class="group">
<input required [formControlName] />
<span class="bar"></span>
<label>{{label}}</label>
</div>
`,
styleUrls: ['input.component.css'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputFieldComponent),
multi: true
}]
})
export class InputFieldComponent implements OnInit, ControlValueAccessor {
@Input() label: string;
constructor() { }
ngOnInit() {
}
writeValue(value) {
if (!value || typeof value !== 'string') {
console.log('not value');
return;
}
}
onChange: any = () => {
}
onTouched: any = () => {
}
registerOnChange(fn) {
this.onChange(fn);
}
registerOnTouched(fn) {
this.onTouched(fn);
}
}
您的实现中有很多错误之处:
writeValue(obj: any): void
函数应用于设置组件中输入控件的值。 您尚未正确实现。 <input>
您内元素Component
不应该有formControlName
它的属性。 registerOnChange
和registerOnTouched
提供了一个函数,您在<input>
发生更改或被触摸时应调用该函数。 您尚未实现。 该文档应提供有关如何进行的足够详细的信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.