0
毎回ng-modelロジックを書く必要がないように、入力用の汎用フィルタが必要でした。汎用入力フィルタ
私のソリューション：
import { Directive, Input, HostListener, ElementRef, Inject } from '@angular/core';
import { NgModel } from '@angular/forms';
@Directive({
selector: '[ngModel][input-filter]',
providers: [NgModel]
})
export class InputFilter {
@Input('input-filter') filter: string;
private regEx: RegExp;
private previousValue: string;
constructor(private element: ElementRef, private ngModel: NgModel) {
this.previousValue = '';
}
@HostListener('keydown', ['$event']) onKeyDown(event) {
if (!this.regEx) {
this.regEx = new RegExp(`^${this.filter}$`);
}
if(this.regEx.test(this.ngModel.value)) {
this.previousValue = this.ngModel.value;
}
}
@HostListener('keyup', ['$event']) onKeyUp(event) {
let e = <KeyboardEvent> event;
if(this.regEx.test(this.ngModel.value)) {
return;
} else {
this.ngModel.update.emit(this.previousValue);
}
}
}
の後ろ
<input type="text" [(ngModel)]="foo" input-filter="-?[0-9]*" />
コードこのソリューションは動作しますが、誰もがより良い方法を持っていた場合、私は興味がありました。
提案がありますか？
UPDATE
私もすぐに質問をしました。オリジナルのディレクティブはモデルを更新しませんでした（私は愚かです）。新しいコードはモデルを更新します。
フィルタはinput要素のvia属性に渡されます。
'filter'値は、イベントがtrigerredされていない' constructor' – Aravind
中にあなたが反応性フォームの代わりの角度でテンプレート駆動型フォームを使用してみました場合にのみ使用できますか？私はあなたがそれをもっと簡単に見つけることができると思います。それは、あなたのテンプレートに入れなければならないことを意味し、より多くのロジックがコントローラ内に含まれています。 – mtpultz