Html 如何在angular 2中将输入值转换为大写（值传递到ngControl）

我试图使用angular 2中的ngControl值验证输入字段。 我需要验证用户是否总是以大写形式输入值

现在我们需要将用户输入的值转换为大写。但我正在使用ngControl而不是ngModel处理输入字段中的值（考虑到我可以使用ngModelChange事件将值更新为大写）

---

那么，转换ngControl使用的值的最佳且低成本的方法是什么呢

我将创建ControlValueAccessor的自定义实现。后者将对应于侦听主机输入事件的指令。这样，您就可以将用户填写的内容用大写字母填写。控件将自动包含大写的值

import {Directive, EventEmitter, HostListener, Output} from '@angular/core';
@Directive({
  selector: '[ngModel][uppercase]'
})
export class UppercaseDirective {
  @Output() ngModelChange: EventEmitter<any> = new EventEmitter();
  value: any;

  @HostListener('input', ['$event']) onInputChange($event) {
    this.value = $event.target.value.toUpperCase();
    this.ngModelChange.emit(this.value);
  }
}

public cambiaUpper(event: any) {
      event.target.value = event.target.value.toUpperCase();
}

以下是实施方案：

@Directive ({
  selector: 'input[uppercase]',
  // When the user updates the input
  host: { '(input)': 'onChange($event.target.value.toUpperCase())' }
})
export class UppercaseValueAccessor extends DefaultValueAccessor {
  (...)

  // When the code updates the value of the
  // property bound to the input
  writeValue(value:any):void {
    if (value!=null) {
      super.writeValue(value.toUpperCase());
    }
  }
}

不要忘记在指令提供程序中注册此自定义值访问器。这样，将使用自定义值访问器而不是默认值访问器

const UPPERCASE_VALUE_ACCESSOR = new Provider(NG_VALUE_ACCESSOR, { useExisting: forwardRef(() => UppercaseValueAccessor), multi: true});

@Directive ({
  providers: [ UPPERCASE_VALUE_ACCESSOR ],
  (...)
})
export class UppercaseValueAccessor ...

并在要使用此方法的组件的directives属性中添加该指令

有关更多详细信息，请参见此类：

此链接可提供其他提示（请参阅“NgModel兼容组件”一节）：

---

正如@Eric Martinez所建议的，您可以创建一个本地模板变量，并将大写字符串绑定到输入事件的value属性：

<input type="text" #input (input)="input.value=$event.target.value.toUpperCase()" />

要使用指令，请在组件的指令列表中指定

UpperCaseText

：

directives: [UpperCaseText]

---

这是我的更通用的解决方案，基本上类似于添加了文本“transformer”函数的DefaultValueAccessor。因此，您可以使用

<input mdInput [transformer]="uppercase" ...>

指令

import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import { Directive, forwardRef, Input, OnChanges, SimpleChanges, Renderer, ElementRef } from '@angular/core';
import { TextMaskModule, MaskedInputDirective } from 'angular2-text-mask';

@Directive({
  selector: 'input[transformer]',
  // When the user updates the input
  host: { '(input)': 'handleInput($event.target.value)', '(blur)': 'onTouched()' },
  providers: [
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TextTransformerDirective), multi: true },
  ]

})
export class TextTransformerDirective implements ControlValueAccessor {
  private inputElement: HTMLInputElement
  lastValue = "";
  onTouched = () => { }
  onChange = (_: any) => { }
  @Input('transformer')
  transformer = (v: string) => v;

  constructor(private renderer: Renderer, private element: ElementRef) {

  }

  handleInput(value: any) {
    let newVal = this.transformer(value);
    if (newVal != value || this.lastValue != newVal) {
      this.lastValue = newVal;
      this.renderer.setElementProperty(this.element.nativeElement, 'value', newVal);
      this.onChange(newVal);
    }
  }

  writeValue(value: any) {
    let normalizedValue = value == null ? '' : value;
    normalizedValue = this.transformer(normalizedValue);
    this.renderer.setElementProperty(this.element.nativeElement, 'value', normalizedValue);
  }

  registerOnChange(fn: (value: any) => any): void { this.onChange = fn }

  registerOnTouched(fn: () => any): void { this.onTouched = fn }

}

以下是我的解决方案：

使用主机侦听器侦听输入事件，然后将其强制为大写

import {Directive, EventEmitter, HostListener, Output} from '@angular/core';
@Directive({
  selector: '[ngModel][uppercase]'
})
export class UppercaseDirective {
  @Output() ngModelChange: EventEmitter<any> = new EventEmitter();
  value: any;

  @HostListener('input', ['$event']) onInputChange($event) {
    this.value = $event.target.value.toUpperCase();
    this.ngModelChange.emit(this.value);
  }
}

public cambiaUpper(event: any) {
      event.target.value = event.target.value.toUpperCase();
}

import{Directive，EventEmitter，HostListener，Output}来自“@angular/core”；
@指示({
选择器：“[ngModel][大写]”
})
导出类大写指令{
@Output（）ngModelChange:EventEmitter=neweventemitter（）；
价值：任何；
@HostListener（'input'，['$event']）onInputChange（$event）{
this.value=$event.target.value.toUpperCase（）；
this.ngModelChange.emit（this.value）；
}
}

使用此指令，您可以轻松地将输入强制为大写，如下所示：

<input type="text" class="form-control" placeholder="ID"
           formControlName="id" [(ngModel)]="form.value.id" uppercase/>

提供了一个很好的解决方案，但它在Angular（v4.3.1）的最新版本中不起作用，因为指令从组件中降级。我的解决方案仅基于他的答案，但适用于最新版本

我提供了一个带有自定义属性指令的通用解决方案，该指令带有一个布尔输入，如果输入为true，它将把输入转换为大写

大写.directive.ts：

     import { Directive, ElementRef, Input } from '@angular/core';
     @Directive({
     selector: '[UpperCase]',
     host: {
        '(input)': 'toUpperCase($event.target.value)',

     }

    })
    export class UpperCaseTextDirective  {

    @Input('UpperCase') allowUpperCase: boolean;
    constructor(private ref: ElementRef) {
    }

    toUpperCase(value: any) {
        if (this.allowUpperCase)
        this.ref.nativeElement.value = value.toUpperCase();
    }

    }

下面是与模板对应的应用程序组件

app.ts

    //our root app component
   import {Component, NgModule, VERSION} from '@angular/core'
   import {BrowserModule} from '@angular/platform-browser'
   import {UpperCaseTextDirective} from './upper-case.directive'

    @Component({
    selector: 'my-app',
    template: `
    <div>
      <h2>Hello {{name}}</h2>
      Auto Capitalize True: <input [UpperCase]="true" type="text" #input />
    <br/>
     Auto Capitalize False: <input [UpperCase]="allowEdit" type="text"/>

    </div>
    `,
    })
    export class App {
    name:string;
    allowEdit:boolean;
    constructor() {
    this.name = `Angular! v${VERSION.full}`;
    this.allowEdit= false;
    }
     }

     @NgModule({
    imports: [ BrowserModule ],
    declarations: [ App,UpperCaseTextDirective ], 
    bootstrap: [ App ]
    })
   export class AppModule {}

//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule，VERSION}
从“@angular/platform browser”导入{BrowserModule}
从“./upper-case.directive”导入{UpperCaseTextDirective}
@组成部分({
选择器：“我的应用程序”，
模板：`
你好{{name}
自动大写为真：


自动大写为假：
`,
})
导出类应用程序{
名称：字符串；
允许：布尔值；
构造函数（）{
this.name=`Angular！v${VERSION.full}`；
这个.allowEdit=false；
}
}
@NGD模块({
导入：[BrowserModule]，
声明：[App，UpperCaseTextDirective]，
引导：[应用程序]
})
导出类AppModule{}

---

这里有一个例子可以证明这一点。

至少在我的经验中，我发现这里的两个答案很有见地，但它们本身并不起作用：（也有第一个评论），和

我将这两个版本的部分放在一起，并提出了这个版本，它现在以反应形式使用Angular 4.1.1：

import{Directive，Renderer，ElementRef，forwardRef}来自“@angular/core”；
从“@angular/forms”导入{NG_VALUE_ACCESSOR，DefaultValueAccessor}；
常量小写字母\u输入\u控制\u值\u访问器={
提供：NG_值访问器，
useExisting:forwardRef（（）=>LowerCaseInputDirective），
多：是的，
};
@指示({
选择器：“输入[小写]”，
主持人:{
//当用户更新输入时
“（输入）：'onInput（$event.target.value）”，
'（模糊）''onTouched（）'，
},
供应商：[
小写字母\u输入\u控制\u值\u访问器，
],
})
导出类LowercaseAinputDirective扩展了DefaultValueAccessor{
构造函数（渲染器：渲染器，elementRef:elementRef）{
super（渲染器，elementRef，false）；
}
writeValue（值：任意）：无效{
const transformed=此.transformValue（值）；
super.writeValue（已转换）；
}
onInput（值：任意）：无效{
const transformed=此.transformValue（值）；
super.writeValue（已转换）；
这是一次改变（转化）；
}
私有转换值（值：任意）：任意{
const result=value&&typeof value==='string'
？value.toLowerCase（）
：价值；
返回结果；
}
}

这适用于小写，但也适用于大写，只需重命名指令，在

selector

和

transformValue

中替换即可

编辑：
使用该指令的HTML代码的简单用法示例：

@Directive({
    selector: 'input[type=text]',
    host: {
        '(input)': 'ref.nativeElement.value=$event.target.value.toUpperCase()',
    }

})
export class UpperCaseText {
    constructor(private ref: ElementRef) {
    }
}

---

这是我正在使用的工作代码angular4

这是您的大写指令

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appUpper]'
})
export class UpperDirective {

  constructor(public ref: ElementRef) { }

  @HostListener('input', ['$event']) onInput(event) {
    this.ref.nativeElement.value = event.target.value.toUpperCase();
  }

}

这是使用大写指令的html文件代码

<input type="text" id="id" placeholder="id" tabindex="0" formControlName="id" appUpper>

---

没有指令的简单代码

在输入文本的模糊事件中，调用将值更改为大写的方法，我的方法称为“cambiaUpper”

塔达！

在角度上效果很好，可以使每个符号都成为一个大符号：）

在

模糊事件中，来自
输入的
文本将值更改为大写

<input type="text" id="firstName" name="firstName" (blur)="$event.target.value = $event.target.value.toUpperCase()">

您能给我们看一些代码吗？或者您到目前为止做了什么
<input type="text" id="firstName" name="firstName" (blur)="$event.target.value = $event.target.value.toUpperCase()">