角度2 ngModelChangeを使用して入力フィールドを大文字に設定する命令

Question

助けてください。テキスト入力を常に大文字に設定する指示文を作成するのに問題があります。これはユーザーインターフェイスを見ているようですが、モデルバインドで最後に入力された文字はまだ小文字で表示されています。以下

<div> 
    <md-input-container fxFlex> 
     <textarea #listCode mdInput [(ngModel)]="listInfo.code" placeholder="List Code" 
        uppercase-code maxlength="50" rows="3" 
        required></textarea> 
     <md-hint align="end">{{listCode.value.length}}/50</md-hint> 
    </md-input-container> 
    {{listInfo.code}} 
</div> 

ディレクティブです：あなたは以下のようにディレクティブを使用する必要があります

import { Directive } from '@angular/core'; 
import { NgControl } from '@angular/forms'; 

@Directive({ 
    selector: '[ngModel][uppercase-code]', 
    host: { 
    '(ngModelChange)': 'ngOnChanges($event)' 
    } 
}) 
export class UppercaseCodeDirective { 
    constructor(public model: NgControl) {} 
    ngOnChanges(event) { 
    var newVal = event.replace(/[^A-Za-z0-9_]*/g, ''); 
    newVal = newVal.toUpperCase(); 
    this.model.valueAccessor.writeValue(newVal);  
    } 
} 

Answer 1

、

@HostListener('keyup') onKeyUp() { 
     this.el.nativeElement.value = this.el.nativeElement.value.toUpperCase(); 

    } 

LIVE DEMO以下

は私のhtmlの一部であります

Answer 2

この問題は、SO、hereで解決されていますが、ソリューションはフレームワークの新しいバージョンと一緒になっています。

少なくとも私の経験では、とにかく自分自身では役に立たなかった2つの有益な回答がありました。from Thierry Templier（最初のコメントも）とfrom calです。

は、私は一緒に両方の部分を入れて、そして今、反応性形の角度4.1.1と協力して、このバージョン、思い付いた：

import { Directive, Renderer, ElementRef, forwardRef } from '@angular/core'; 
import { NG_VALUE_ACCESSOR, DefaultValueAccessor } from '@angular/forms'; 

const LOWERCASE_INPUT_CONTROL_VALUE_ACCESSOR = { 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => LowerCaseInputDirective), 
    multi: true, 
}; 

@Directive({ 
    selector: 'input[lowercase]', 
    host: { 
    // When the user updates the input 
    '(input)': 'onInput($event.target.value)', 
    '(blur)': 'onTouched()', 
    }, 
    providers: [ 
    LOWERCASE_INPUT_CONTROL_VALUE_ACCESSOR, 
    ], 
}) 
export class LowerCaseInputDirective extends DefaultValueAccessor { 

    constructor(renderer: Renderer, elementRef: ElementRef) { 
    super(renderer, elementRef, false); 
    } 

    writeValue(value: any): void { 
    const transformed = this.transformValue(value); 

    super.writeValue(transformed); 
    } 

    onInput(value: any): void { 
    const transformed = this.transformValue(value); 

    super.writeValue(transformed); 
    this.onChange(transformed); 
    } 

    private transformValue(value: any): any { 
    const result = value && typeof value === 'string' 
     ? value.toLowerCase() 
     : value; 

    return result; 
    } 
} 

これは小文字のためですが、すべてが成立します大文字と小文字を区別するだけで、selectorとtransformValueに置き換えてください。