Angular2を使用しているときに入力タイプにパイプを実装する方法は？

Question

私はangularJS2が新しく、私はフォームの入力タイプのテキストにパイプを実装しようとしています。私は、テキストフィールドに入力された値がすべて大文字になりたいこの

<input type="text" class="col-lg-7 small rounded form-control" formControlName="firstName" /> 

のように入力タグを持っている場合例えば、我々は、フォームの入力要素の内側に、これを達成することができますか？

Answer 1

入力にパイプを使用することはできません。

しかし、入力メソッド内でパイプを実行することはできます。

this.toUpper = new UpperCasePipe().transform(input); 

Answer 2

1に役立ちます希望は - あなたが入力にパイプを使用することはできません。この種のものを達成するために、あなたは(keyup)イベントを使用することができます。

<input 
    type="text" 
    class="col-lg-7 small rounded form-control" 
    formControlName="firstName" 
    (keyup)="upperValue($event.target.value)"> 

コンポーネント：

upperValue(value: string) { 
    this.formGroup.patchValue({ 
    firstName: value.toUpperCase() 
    }); 
} 

STACKBLITZ DEMO

---

2 - あなたが表示したい場合は元ユーザーのためのテキストと「舞台裏」に変更し、あなたはディレクティブを作成することができます。

@Directive({ 
    selector: '[appUppercase]' 
}) 
export class UppercaseDirective implements OnInit { 

    private readonly destroySubject$ = new Subject<void>(); 

    constructor(
    private readonly ngControl: NgControl 
) { } 

    ngOnDestroy(): void { 
    this.destroySubject$.next(); 
    this.destroySubject$.complete(); 
    } 

    ngOnInit(): void { 
    this.ngControl.control.valueChanges.pipe(
     takeUntil(this.destroySubject$) 
    ).subscribe(value => { 
     const newValue = value.toUpperCase(); 

     this.ngControl.control.setValue(newValue, { 
     emitEvent: false, 
     emitModelToViewChange: false, 
     emitViewToModelChange: false 
     }); 
    }); 
    } 
} 

STACKBLITZ DEMO

---

3 - あなたは修正テキストを表示したい場合ユーザーのために、formControlで小文字にしておくと、指示文で次の行を変更してください。

... 
this.elementRef.nativeElement.value = value.toUpperCase(); 

this.ngControl.control.setValue(value.toLowerCase(), { 
    emitEvent: false, 
    emitModelToViewChange: false, 
    emitViewToModelChange: false 
}); 
... 

STACKBLITZ DEMO