Angular2 - 只允许在输入中输入字母字符答案

【问题标题】：Angular2 - Only Allow Alpha Characters TO Be Entered In An InputAngular2 - 只允许在输入中输入字母字符
【发布时间】：2017-11-13 14:21:04
【问题描述】：

我对@987654321@ 很陌生，似乎无法在任何地方找到我的答案。我有一个input（如下所示），但我只希望它允许以下内容：

A-Z
a-z
'
-
[空间]

我不知道该怎么做。我试过ng-pattern="/^[a-zA-Z\s]*$/"、pattern="/^[a-zA-Z\s]*$/"和ng-pattern-restrict="/^[a-zA-Z\s]*$/"。

HTML

<td>
    <md-input-container>
        <input mdInput [(ngModel)]="details.firstName" placeholder="First name(s)" ng-pattern="/^[a-zA-Z\s]*$/">
    </md-input-container>
</td>

理想情况下，如果用户输入一个数字字符，我希望它自己被删除或者只是不允许（不显示）在字段中

【问题讨论】：

标签： angular angular2-forms angular2-directives

【解决方案1】：

Angular Reactive Form Validation - 只接受字母和空格。

firstName: [
        '',
        [
          Validators.required,
          Validators.maxLength(50),
          Validators.pattern('^[a-zA-Z ]*$')
        ]
      ],

【讨论】：

【解决方案2】：

我的解决方法是在我的组件中进行

firstName: ['', Validators.pattern('^[a-zA-Z \-\']+')],

【讨论】：

请注意，这只适用于Reactive Froms

【解决方案3】：

你需要使用以下来使模式工作

<input mdInput [(ngModel)]="details.firstName" placeholder="First name(s)" [pattern]="'^[a-zA-Z \-\']$'">

【讨论】：

谢谢，但这会导致以下错误：Parser Error: Unexpected token ']' at column 14 in ['^[a-zA-Z \-']$'] in ng:///AppModule/PersonalDetailsComponent.html@12:91 ("tainer> <input mdInput [(ngModel)]="details.firstName" placeholder="First name(s)" [ERROR ->][pattern]="'^[a-zA-Z \-']$'"> </md-input-container> </td>
我已经使用了更新，但我仍然可以在字段中输入 0-9。

【解决方案4】：

您可以使用以下指令来允许键入传递任意正则表达式的字符串

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

@Directive({selector: '[allowedRegExp]'})
export class AllowedRegExpDirective {
    
  @Input() allowedRegExp: string;
  
  @HostListener('keydown',['$event']) onKeyDown(event: any) {
    let k=event.target.value + event.key;

    if(['ArrowLeft','ArrowRight','ArrowUp','ArroDown','Backspace','Tab','Alt'
       'Shift','Control','Enter','Delete','Meta'].includes(event.key)) return;

    let re = new RegExp(this.allowedRegExp);
        
    if(!re.test(k)) event.preventDefault();
  }
}

示例用法：问题中的 0-5 个字符

<input [allowedRegExp]="'^[a-zA-Z '-]{0,5}$'" type="text" ... >

【讨论】：

【解决方案5】：

使用这个：

ng-pattern="/^[a-zA-Z]*$/"

【讨论】：

不知道为什么这是被接受的答案 - 这是 AngularJS 的方式，而不是 Angular 是必需的。
是的，这不是 Angular2+ 解决方案
这里不能输入空格。那么它是无效的