什么'；让ngModel输入大写字母angular8的正确方法是什么？

确保在angular8文本框中键入的任何输入都是大写的正确方法是什么

我尝试将样式应用于输入标记

文本转换：大写

，但看起来输入框中键入的文本的外观是大写的，而实际存储在

[（ngModel）]

---

不以大写字母显示。

我不知道这是否是最好的方法，但在不直接干扰ng模型的情况下，我希望：

import { Component } from '@angular/core';

    @Component({
      selector: 'my-app',
      template: 
        `<input style="text-transform: uppercase" [(ngModel)]="myProperty"> 
        <h1>{{ myProperty }}</h1>
        <h1>{{ _myProperty }}</h1>`,
    })
    export class AppComponent  {
        _myProperty = 'this write in script';
        get myProperty(): string {
            return this._myProperty;
        }
        set myProperty(value: string) {
            this._myProperty = value.toUpperCase();
        }
    }

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：
` 
{{myProperty}}
{{{u myProperty}}`，
})
导出类AppComponent{
_myProperty='此写入脚本'；
获取myProperty（）：字符串{
将此返回。\u myProperty；
}
设置myProperty（值：字符串）{
这个._myProperty=value.toUpperCase（）；
}
}

---

我不知道这是否是最好的方法，但在不直接干扰ng模型的情况下，我希望：

import { Component } from '@angular/core';

    @Component({
      selector: 'my-app',
      template: 
        `<input style="text-transform: uppercase" [(ngModel)]="myProperty"> 
        <h1>{{ myProperty }}</h1>
        <h1>{{ _myProperty }}</h1>`,
    })
    export class AppComponent  {
        _myProperty = 'this write in script';
        get myProperty(): string {
            return this._myProperty;
        }
        set myProperty(value: string) {
            this._myProperty = value.toUpperCase();
        }
    }

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：
` 
{{myProperty}}
{{{u myProperty}}`，
})
导出类AppComponent{
_myProperty='此写入脚本'；
获取myProperty（）：字符串{
将此返回。\u myProperty；
}
设置myProperty（值：字符串）{
这个._myProperty=value.toUpperCase（）；
}
}

您可以将

[（ngModel）]

拆分为

[ngModel]

和

（ngModelChange）

，并在事件处理程序中将输入文本转换为大写：

然而，当输入文本的开头或中间插入小写字母时，会出现一个问题：插入符号自动移动到文本的末尾。中建议的技术可用于保持插入符号位置，如以下改进代码所示：

公共ConvertUpperCase（输入：HTMLInputElement，val:string）{ //保存插入符号位置 const start=input.selectionStart； const end=input.selectionEnd； 设置超时（（）=>{ //返回转换后的字符串后恢复插入符号位置 输入。设置选择范围（开始、结束）； }); //返回转换为大写的输入字符串 返回值toUpperCase（）； } 有关演示，请参见。

您可以将

[（ngModel）]

拆分为

[ngModel]

和

（ngModelChange）

，并在事件处理程序中将输入文本转换为大写：

然而，当输入文本的开头或中间插入小写字母时，会出现一个问题：插入符号自动移动到文本的末尾。中建议的技术可用于保持插入符号位置，如以下改进代码所示：

公共ConvertUpperCase（输入：HTMLInputElement，val:string）{ //保存插入符号位置 const start=input.selectionStart； const end=input.selectionEnd； 设置超时（（）=>{ //返回转换后的字符串后恢复插入符号位置 输入。设置选择范围（开始、结束）； }); //返回转换为大写的输入字符串 返回值toUpperCase（）； } 有关演示，请参阅。

您还可以使用输入字段的（输入）事件

in.ts

 public value: string = '';

.html

值：{{Value}}

从这里找到有用的链接

您还可以使用输入字段的（输入）事件

in.ts

 public value: string = '';

.html

值：{{Value}}

从这里找到有用的链接