大写指令不更新输入角度

Question

这个大写指令不适用于角度...... 如果我打印 console.log() 以查看格式方法上的值，我可以看到我输入的值，但输入文本上的文本不会更新为大写；

我的 html 声明

<input type="text" uppercase >

import {Directive, Input, Output, EventEmitter, OnInit} from 'angular2/core';

@Directive({
    selector: '[uppercase]',
    host: {
        '[value]': 'uppercase',
        '(input)': 'format($event.target.value)'
    }
})
export class Uppercase implements OnInit {

    @Input() uppercase: string;
    @Output() uppercaseChange: EventEmitter<string> = new EventEmitter<string>();

    constructor() {
    }

    ngOnInit() {
        this.uppercase = this.uppercase || '';
        this.format(this.uppercase);
    }

    format(value) {
        value = value.toUpperCase();
        this.uppercaseChange.next(value);
    }
}

如何将文本转为大写？

Answer 1

您可能需要像这样

<input type="text" uppercase >

那样更新您的模板，以应用

Directive

中的所有更改。

但是纠正你的逻辑很重要，因为

uppercase

指令将应用于类似

nativeElement

的输入。

因此您可能需要实现 ControlValueAccessor 接口并调整您的指令。

这是一个如何执行此操作的示例（我已调整您的代码）：stackblitz 上的大写指令

我在代码中添加了一些注释。

如果这就是您想要归档的内容，请告诉我。

---

编辑（看下面的评论）

如果您正在寻找一种更简单的方法来创建指令并保留您需要的两件事输入文本应为大写并且占位符应为小写，您可以简单地执行以下操作

大写.directive.ts

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

@Directive({
 selector: '[uppercase]'
})
export class UppercaseDirective {
  constructor(public ref: ElementRef) { }

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

your.template.html

<input placeholder="placeholder lowercase" uppercase type='text'>

我在 here 在 stackblitz 上制作了另一个演示

Answer 2

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

@Directive({
  selector: '[uppercase]'
})
export class UppercaseDirective {

  constructor(private readonly control: NgControl) { }

  @HostListener('input', ['$event.target'])
  protected onInput(input: HTMLInputElement): void {
    const caretPos = input.selectionStart;
    this.control.control.setValue(input.value.toUpperCase());
    input.setSelectionRange(caretPos, caretPos);
  }

}