web-dev-qa-db-ja.com

Angular2-入力にアルファベット文字のみを入力できるようにする

私はAngular2と私の答えをどこでも見つけることができないようです。私は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>

理想的には、ユーザーが数字を入力した場合は、それだけで削除されるか、フィールドで許可されない（表示されない）ようにします

angularangular2-formsangular2-directives
3
murday1983

私の修正は私のコンポーネントでそれを行うことでした

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

Angular Reactive Form Validation-アルファベットとスペースのみを受け入れます。

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

パターンを機能させるには、以下を使用する必要があります

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

次のディレクティブを使用して、任意の正規表現を渡す文字列を入力できます

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" ... >
0
Kamil Kiełczewski