0
大きな角度2のプロジェクトでは、すべての入力が.trim()になります。すべてのフォームはテンプレートベースの非ReactiveFormsです。私が持っているすべての入力をリファクタリングしたくないので、私はディレクティブが行く方法だと考えました。グローバルディレクティブ（変更）は、コンポーネントにローカルないくつかのバインドされたメソッドが実行されないようにします。
さらに、さまざまなコンポーネントは、リスナーを(input)または(change)（たとえば、ユーザータイプとしてフィールドの大文字のテキスト）に添付します。以下
私の実装では、（Angular2最終的に先行し、その現在の状態では実行可能ではない）（this bugに応じて角度寄稿者によって書かれた）this Plunkerから採取しthis solutionれます。
次のコードでは、私のコンポーネントレベルのメソッドはこれ以上呼び出されません。（上記の大文字の入力と同様です）。
を編集する：少なくとも一部のコンポーネントレベルの(blur)メソッドが呼び出されているようです。
コンポーネントに実行を渡すための呼び出しのようなものがないと思いますか？
私が試してみました：
- Reordering my
declarationsをし、それがControlValueAccessor代わりのDefaultValueAccessorの実装、 - を助けにはなりませんでした。
多分forwardRefの何か？
マイトリム指令：
import { Directive, Renderer, ElementRef, forwardRef } from "@angular/core";
import { DefaultValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
const TRIM_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TrimValueAccessor),
multi: true
};
@Directive({
selector: 'input[type=text]',
host: { '(change)': 'trim($event.target.value)' },
providers: [TRIM_VALUE_ACCESSOR]
})
export class TrimValueAccessor implements DefaultValueAccessor {
onChange = (_: any) => {};
onTouched =() => {};
constructor(private renderer: Renderer, private elementRef: ElementRef) {};
trim(value: any): void {
if (value) {
value = value.toString().trim();
this.writeValue(value);
}
this.onChange(value);
};
registerOnChange(fn: (value: any) => any): void { this.onChange = fn; }
registerOnTouched(fn:() => any): void { this.onTouched = fn; }
writeValue(value: any): void {
this.renderer.setElementProperty(this.elementRef.nativeElement, 'value', value);
}
}
これはNgModule[declarations]