26

属性ディレクティブを使用して入力中に入力フィールドの値を変更 (強制) したい。それを使用して、フォームの入力フィールドで使用される大文字、小文字、maxlength、filterchar などのディレクティブを作成したいと思います。この例を見つけました: Angular 2 Attribute Directive Typescript Exampleですが、これはうまくいかないようです。Angular2 の以前のビルドではそうなったのかもしれません。しかし、それはまさに私がやりたいことです。

次のようなディレクティブを作成すると:

import {Directive} from 'angular2/core';
import {NgModel} from 'angular2/common';

@Directive({ 
selector: '[ngModel][uppercase]', 
host: {
    '(input)' : 'onInputChange()'
      }
})
export class UppercaseDirective{

constructor(public model:NgModel){}

onInputChange(){
    var newValue = this.model.value.toUpperCase();
    this.model.valueAccessor.writeValue(newValue);
    this.model.viewToModelUpdate(newValue);
    }
}

そして、次のようなフォームで使用します。

<input type="text" class="form-control" [(ngModel)]="field.name" ngControl="name" #name="ngForm" required uppercase>

（そしてNgModelプロバイダーとして登録します）。私は得る

未定義の this.model.value。

私は$event.target.value = $event.target.value.toUpperCase()（ で渡すときに$event）使用できonInputChange()、それはビューで機能します（入力は大文字で表示されますが、バインドフィールド「field.name」は更新されません。

では、これを行う Angular2 属性ディレクティブを作成するにはどうすればよいでしょうか?

- 編集 -

さらなる調査の後、私はなんとか欲しいものを手に入れることができました。ギュンターが提供した答えは、私の当初の意図に近く、おそらくより良いものです。しかし、ここに別の方法があります：

import {Directive, Input, Output, EventEmitter} from 'angular2/core';

@Directive({ 
selector: '[ngModel][uppercase]',
host: {
"(input)": 'onInputChange($event)'
    }
})
export class UppercaseDirective{
@Output() ngModelChange:EventEmitter<any> = new EventEmitter()
value: any

onInputChange($event){
    this.value = $event.target.value.toUpperCase()
    this.ngModelChange.emit(this.value)
    }
}

私が言ったように、これがこれを行う良い方法であるかどうかはわかりませんので、コメントを歓迎します.

4

4 に答える 4

37

ギュンターの答えは有望に見えますが、モデルの最終的な値には最後に入力された文字が小文字であるというバグがあります。

ここを参照してください：

https://plnkr.co/edit/SzxO2Ykg2pKq1qfgKVMH

質問に記載されている回答を使用してください。正しく動作します。

@Directive({ 
selector: '[ngModel][uppercase]',
host: {
"(input)": 'onInputChange($event)'
    }
})
export class UppercaseDirective{
@Output() ngModelChange:EventEmitter<any> = new EventEmitter()
value: any

onInputChange($event){
    this.value = $event.target.value.toUpperCase()
    this.ngModelChange.emit(this.value)
    }
}

https://plnkr.co/edit/oE3KNMCG7bvEj8FV07RV

于 2016-06-01T06:51:59.533 に答える