Question

我不确定这叫什么。这很简单。我尝试使用管道，但是我收到了一个错误。我正在寻找一些简单的东西：

<input [(ngModel)]="order.name | lettersOnlyPipe"/>

这不起作用。我能做些什么才能实现这一目标？

Answer 1

使用最近的Angular 4版本，您可以使用pattern属性来限制此feature

中提到的字符

<input [(ngModel)]="order.name" pattern="" />

在其他情况下，您应该使用自定义指令处理它。有关示例，请参阅此answer。

Answer 2

你最好的选择就是你自己的指示。

让您前进的一些简单想法：

您的指令监视其主机元素上的输入事件
在每个输入事件上，检查输入值是否有效，如果没有，则将输入设置回旧值

或者， *监控keydown事件，并在每个keydown上检查密钥是否是有效密钥 - 如果不是，请将输入设置回旧值

这是基本方法。您可以查看highlight directive example in the angular docs作为开始的指南。

Answer 3

我发布了类似的response 在这里，您只需要更改正则表达式（从中删除数字和阿拉伯字符）。希望它有所帮助。

Answer 4

input [name]="fullName" pattern="[a-zA-Z ]*" ngModel

在角度4中，您可以使用Pattern属性并仅为= [a-zA-Z ]指定模式。

Answer 5

使用模式属性不会阻止在输入字段中输入任何内容。它只会将其标记为无效。您必须使用指令才能这样做。这是一个简单的示例，它可以防止在输入字段中输入除正数以外的任何内容：

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

@Directive({
  selector: 'input[dsancNumeroPositif]'
})
export class NumeroPositifDirective {

  acceptedCharacters: string[] = ['.', ',', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

  constructor() { }

  @HostListener('keypress', ['$event']) onInput(event: KeyboardEvent): void
  {
    if (!this.acceptedCharacters.includes(event.key)) {
      event.preventDefault();
    }
  }

}

阻止用户在文本输入字段中键入某些字符

5 个答案: