Angular2 - 仅允许在输入中输入字母字符

时间:2017-06-12 07:37:26

标签: angular angular2-forms angular2-directives

我对ValueError: The truth value of an array with more than one element is ambiguous. Use a.any() or a.all() 很新,似乎无法在任何地方找到答案。我有一个Angular2(如下所示),但我只想让它允许以下内容:

  • A-Z
  • A-Z
  • '
  • -
  • [SPACE]

我不知道如何做到这一点。我尝试过inputng-pattern="/^[a-zA-Z\s]*$/"pattern="/^[a-zA-Z\s]*$/"

HTML

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

理想情况下,如果用户输入了一个数字字符,我就会将其自身删除,或者只是不允许(不显示)在字段中

5 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:3)

我的解决方法是在我的组件中执行此操作

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

答案 2 :(得分:3)

角度反应形式验证-仅接受字母和空格。

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

答案 3 :(得分:-1)

您可以使用以下指令,允许键入通过任意正则表达式的字符串

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" ... >

答案 4 :(得分:-3)

使用此:

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