カスタムコンポーネント
InputField
がありますおよび
SignupComponent
リアクティブフォーム付き。
<ui-input-field formControlName="email" label="email"></ui-input-field>
これが好きなときは
formControlName
が出ますで
ui-input-field
、タグ
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>
を呼び出すたびに呼び出す関数が提供されます 変更されたか、触れられました。これを実装していません。ドキュメントには、処理方法に関する十分な詳細が記載されている必要があります。