如何在输入角度 8 时将输入转换为大写答案

【问题标题】：How to transform the inputs to uppercase while typing in angular8如何在输入角度 8 时将输入转换为大写
【发布时间】：2020-05-19 07:03:25
【问题描述】：

我需要让整个应用程序在打字时使用大写字母。所以我尝试在 HTML 中使用，如下所示。

 #input (input)="input.value=$event.target.value.toUpperCase()"

我还通过了一个指令，该指令在输入时将输入变为大写，但两者都不允许ctrl + z，当我做ctrl + z时，如果输入字段为空，它必须给我空值，在编辑模式下，如果已经有值并且我们尝试编辑并做ctrl + z，那么我们需要得到这个值已经存储了。

演示： DEMO LInk

我试过的DEMO： DEMO Link of what i tried 谁能帮我解决这个问题

【问题讨论】：

你可以添加css：text-transform: uppercase;?

标签： angular uppercase

【解决方案1】：

您需要以角度方式绑定 keyup 事件。下面是例子。

&lt;input type="text" onkeyup="this.value = this.value.toUpperCase();"&gt;

【讨论】：

感谢您的回复，但实际上我希望 ctrl+z 操作在这里工作

【解决方案2】：

您可以像下面的代码一样使用自定义指令来修剪每个输入元素字符串，同样您可以使用 toUpperCase():

import { Directive, ElementRef, HostListener, Output, EventEmitter } from '@angular/core';
import { NgModel } from '@angular/forms';

@Directive({
  selector: 'input[type="text"], input[type="email"], input[type="number"], textarea, input[type="password"]',
  providers: [NgModel]
})
export class StringTrimDirective {
  @Output() ngModelChange: EventEmitter<any> = new EventEmitter()

  constructor(private el: ElementRef, private model: NgModel) {
    // To know trim is applied or not. For Testing
    //el.nativeElement.style.backgroundColor = 'yellow';
  }

  @HostListener('change') onInputChange3() {
    // no-trim attribute on element will skip the triming.
    if (!this.el.nativeElement.noTrim) {
      const value = this.el.nativeElement.value.trim();
      this.model.viewModel = value; 
      this.ngModelChange.emit(value);
    }
  }
}

【讨论】：

感谢您的回复，我正在使用响应式表单，可以在那里使用吗？
您能否在此链接中编辑您的答案stackblitz.com/edit/…
我已经编辑了你的代码并添加了一个新的名称输入字段。请检查它。

【解决方案3】：

你可以试试这个：

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { tap } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  control: FormControl;
  ngOnInit() {
    this.control = new FormControl();

    this.control.valueChanges
    .pipe(
        tap((value) => console.log(value)),
        tap((value: string) => this.control.setValue(value.toUpperCase(), {emitEvent: false})
      )
    )
    .subscribe()
  }
}

component.html

<input type="text" [formControl]="control">

stackblitz

【讨论】：

【解决方案4】：

不需要为此使用管道或指令。

只需给输入字段一个类，例如.myInput

现在装饰它如下：

.myInput {
    text-transform: uppercase;
}

【讨论】：