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();
}

使用指令来大写输入

2 个答案: