Angular 当模型没有'；t在技术上发生了变化，但输入字段的值以角度为单位？

我有一个引用模型的输入字段，这个输入字段有限制（没有特殊字符），所以我创建了一个自定义管道来去除无效字符。这在很大程度上是可行的。但是，如果我输入了无效字符，无效字符将保留在那里，直到我输入了有效值。我知道为什么会发生这种情况，因为从自定义管道返回的值与模型相同，因此ngModelChange事件没有检测到更改，也没有更新输入字段

如何强制输入字段重新渲染

我对angular很陌生，我不确定最好的处理方法。我想确保我了解问题的实质

我试图寻找这个问题，但是我发现的解决方案指向使用变更检测，但我认为这无助于解决这个问题，因为技术上没有变更。我还考虑添加一个*ngIf方法来比较输入字段值和方法，但这似乎有点老套，并不能真正帮助我理解实际问题

我也尝试过使用输入模式来实现这一点，但遇到了一些困难，我认为这是因为我们也使用了Ionic，它们的实现方式与Angular不同

我用角5和离子4

user.html：

<ion-input type="text" placeholder="username" [ngModel]="username | transformUsername" (ngModelChange)="username=$event"></ion-input>

---

我希望它能以一种与管道函数中的正则表达式不匹配的字符根本不会出现的方式运行。

我最终找到了一个解决方案，该解决方案适用于使用指令后的情况，所以我想我会发布我的解决方案，以防其他人遇到类似问题

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

@Directive({
  selector: '[usernameValidator]'
})

export class UsernameDirective{
  usernameRegex = /[^a-zA-Z0-9-_.]/g;
  inputElement: HTMLElement;

  @HostListener('keydown', ['$event'])
  onKeyDown(e: KeyboardEvent) {
    if(e.key.match(this.usernameRegex) !== null) {
      e.preventDefault();
    }
  }
}

---

首先，如果您不想渲染任何内容，为什么要将其替换为

？第二，你真的需要一个管道来完成这个任务吗？它在其他地方用过吗？抱歉-是的。是在我测试一个理论时添加的，我在粘贴代码片段之前忘了删除它。这应该是一个空字符串，我会更新它。而且，不，它不一定是管道，我对任何有效的方法都持开放态度，只是管道让我最接近我想要的。

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

@Directive({
  selector: '[usernameValidator]'
})

export class UsernameDirective{
  usernameRegex = /[^a-zA-Z0-9-_.]/g;
  inputElement: HTMLElement;

  @HostListener('keydown', ['$event'])
  onKeyDown(e: KeyboardEvent) {
    if(e.key.match(this.usernameRegex) !== null) {
      e.preventDefault();
    }
  }
}