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
しかし、私はプレゼンテーション層の上に大文字を使用する場合は何? したがって、formControlvalueはユーザーが入力したとおりになります..フォーマットなしで –
@johnSmith更新を確認してください。 – developer033
developer033ありがとう!!!!!あなたは最高です! –