私はAngular2
と私の答えをどこでも見つけることができないようです。私はinput
を持っていますが(以下に示すように)、次のことを許可するだけです。
これを行う方法について私は知りません。私が試してみました 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>
理想的には、ユーザーが数字を入力した場合は、それだけで削除されるか、フィールドで許可されない(表示されない)ようにします
私の修正は私のコンポーネントでそれを行うことでした
firstName: ['', Validators.pattern('^[a-zA-Z \-\']+')],
Angular Reactive Form Validation-アルファベットとスペースのみを受け入れます。
firstName: [
'',
[
Validators.required,
Validators.maxLength(50),
Validators.pattern('^[a-zA-Z ]*$')
]
],
パターンを機能させるには、以下を使用する必要があります
<input mdInput [(ngModel)]="details.firstName" placeholder="First name(s)" [pattern]="'^[a-zA-Z \-\']$'">
次のディレクティブを使用して、任意の正規表現を渡す文字列を入力できます
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" ... >