Question

请帮忙。我在创建一个总是将文本输入设置为大写的指令时遇到了麻烦。它似乎正在查看用户界面，但模型绑定显示仍为小写字符的最后一个类型字符。

下面的

是我的html的一部分：

xargs

以下是指令：

-0

Answer 1

您应该使用如下指令，

@HostListener('keyup') onKeyUp() {
      this.el.nativeElement.value = this.el.nativeElement.value.toUpperCase();

    }

<强> LIVE DEMO

Answer 2

虽然解决方案与框架更新的版本一起堆积，但这个问题在某种程度上已经在SO here得到了回答。

至少根据我的经验，有两个有用的答案，无论如何它们本身都不起作用：from Thierry Templier（还有第一条评论）和from cal。

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

import { Directive, Renderer, ElementRef, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, DefaultValueAccessor } from '@angular/forms';

const LOWERCASE_INPUT_CONTROL_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => LowerCaseInputDirective),
  multi: true,
};

@Directive({
  selector: 'input[lowercase]',
  host: {
    // When the user updates the input
    '(input)': 'onInput($event.target.value)',
    '(blur)': 'onTouched()',
  },
  providers: [
    LOWERCASE_INPUT_CONTROL_VALUE_ACCESSOR,
  ],
})
export class LowerCaseInputDirective extends DefaultValueAccessor {

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

  writeValue(value: any): void {
    const transformed = this.transformValue(value);

    super.writeValue(transformed);
  }

  onInput(value: any): void {
    const transformed = this.transformValue(value);

    super.writeValue(transformed);
    this.onChange(transformed);
  }

  private transformValue(value: any): any {
    const result = value && typeof value === 'string'
      ? value.toLowerCase()
      : value;

    return result;
  }
}

这是小写的，但一切都适用于大写，只需重命名指令，在selector和transformValue内替换。

Angular 2 Directive使用ngModelChange将输入字段设置为大写

2 个答案: