Typescript + Html:如何在输入字段中强制大写

Question

我正在使用angular(typescript),我在html中有一个modelform,用户必须插入代码字段和描述字段.

代码字段必须始终由用户输入,始终为大写.

我发现并遵循了这个问题: 如何将输入值转换为角度2的大写(传递给ngControl的值)

但是用户插入的最后一个字母仍然是小写的..但最基本的是数据库总是全部大写(我也设置了4个字符的限制,这是正常的)这是我的代码现在,但如上所述它不能正常工作:

<input type="text" id="code" #code class="form-control" formControlName="code" maxlength="4"
                 (input)="code.value=$event.target.value.toUpperCase()">

有没有人找到一个快速,功能和快速的解决方案？

谢谢!

Answer 1

您可以简单地添加 oninput="this.value = this.value.toUpperCase()"在您的<input>标记,它会立即转换任何输入你的输入字段为大写.

Answer 2

您可以创建一个 Angular 指令，将所有用户输入转换为大写。

该指令扩展了DefaultValueAccessor：

@Directive({
  selector: 'input[toUppercase]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => UpperCaseInputDirective),
    },
  ],
})
export class UpperCaseInputDirective extends DefaultValueAccessor {
  @HostListener('input', ['$event']) input($event: InputEvent) {
    const target = $event.target as HTMLInputElement;
    const start = target.selectionStart;

    target.value = target.value.toUpperCase();
    target.setSelectionRange(start, start);

    this.onChange(target.value);
  }

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

在输入上使用这样的指令：

<input name="myTdfInput" type="text" [(ngModel)]="value" toUppercase>

该解决方案适用于反应式表单和模板驱动表单。

请参阅 Stackblitz 上的工作演示：https://stackblitz.com/edit/angular-input-field-to-accept-only-numbers-czivy3? file=src/app/to-uppercase.directive.ts

该解决方案的积分请访问： https: //twitter.com/BartBurgov（请参阅他的推文：https://twitter.com/BartBurgov/status/1582394428748009477 ?s=20&t=RiefRcZ1B8IF42wp2rWzaQ ）

Answer 3

有点晚了，但我很惊讶没有看到 css 替代方案。

在输入字段添加：

.input-upper{
    text-transform: uppercase;
}

Answer 4

如果您正在使用ngModel，则可以使用ngModelChangeJavaScript的.ToUpperCase（）来做到这一点。

<input [ngModel]="person.Name" (ngModelChange)="person.Name = $event.toUpperCase()">

Answer 5

根据@Ali Heikal 的回答，它应该是：

<input #code formControlName="code" (input)="code.value = code.value.toUpperCase()" type="text">

或.toLocaleUpperCase()在必要时使用。

Answer 6

您可以使用pattern属性来限制允许的输入。您可能还希望通过大写他们的输入来帮助用户。

<input type="text" pattern="[A-Z]*" name="example" />

Answer 7

这对我有用。我只是使用了 keyup，每当用户添加一个字符时，它都会自动将其转换为大写，不仅在 UI 中，而且在模型中也是如此。

(keyup)="form.patchValue({name: $event.target.value.toUpperCase()})"