使用指令将输入大写

Question

我有一个输入，我想在用户写入时大写。

我创建了一个指令来执行此操作：

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

  constructor() {  }

@Output() outputUpper: EventEmitter<string> = new EventEmitter();
value: string;

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

<input matInput (ngModel)="f.value.id" [ngModel]="data?.id" name="id" required placeholder="ID" maxlength="10" uppercase/>

我检查 f.value.id 是否在上，但这不是我想要的，我想更改输入值

我可以在控制台中看到，this.value 是正确的，但它在输入中没有变化。我缺少什么？

Answer 1

将 [ngModel] 更改为 [(ngModel)]，两种方式的数据绑定将在此处发挥作用。

Answer 2

我找到了，因为我正在这样做，我正在更改模型中的值而不是输入中的值，解决方案：

constructor(private el: ElementRef) {  }

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

使用指令将输入大写

using directive to capitalize input

directive

angular-directive

angular2-directives

angular

angular5