使用指令大写输入答案

【问题标题】：using directive to capitalize input使用指令大写输入
【发布时间】：2018-07-10 13:54:27
【问题描述】：

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

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

@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 是正确的，但它在输入中没有改变。我错过了什么？

【问题讨论】：

我猜在这种情况下你必须实现 ngModel 的 ControlValueAccessor
没有ngModel 事件。事件是(ngModelChange)，这将使它成为(ngModelChange)="f.value.id = $event"
事件被触发，控制台显示上面的字符串，问题是输入中没有设置这个

标签： angular directive angular2-directives angular5 angular-directive

【解决方案1】：

将 [ngModel] 更改为 [(ngModel)]，两种方式的数据绑定都可以解决问题。

【讨论】：

它崩溃是因为 ? => [ngModel] = data?.id

【解决方案2】：

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

constructor(private el: ElementRef) {  }

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

【讨论】：