Question

我有一个表单，我想以某种方式进行角度验证，如果用户输入任何特殊字符，则应该显示错误。表单有两个字段名称和描述。在名称字段中，我想使用正则表达式进行验证，以使用户除了字母数字字符外不能输入其他任何字符。

HTML代码：

public class MailProtocolloController : ApiController, BaseControllerNamespace.BaseController

TypeScript代码：-

 <form (ngSubmit)="(submit)" #formControl="ngForm">
                    <div class="form">
                        <mat-form-field color="accent">
                            <input
                                matInput
                                #input
                                class="form-control"
                                placeholder="name"
                                [(ngModel)]="data.projectName"
                                name="name"
                                (ngModelChange)="noWhiteSpaceOnChange()"
                                required
                                minlength="4"
                            />

                            <mat-error *ngIf="formControl.invalid">{{
                                getErrorMessage()
                            }}</mat-error>
                        </mat-form-field>
                    </div>
                   </form>

Answer 1

在寻找关于stackoverflow的答案时从某处获取了代码。我找不到链接来感谢代码作者。

我制作了一个新文件，并粘贴了以下代码，并将指令添加到了app.moule.ts声明中。

import { Directive, HostListener, ElementRef, Input } from '@angular/core';
@Directive({
selector: '[specialIsAlphaNumeric]'
})
export class SpecialCharacterDirective {

regexStr = '^[a-zA-Z0-9_]*$';
@Input() isAlphaNumeric: boolean;

constructor(private el: ElementRef) { }


@HostListener('keypress', ['$event']) onKeyPress(event) {
return new RegExp(this.regexStr).test(event.key);
}

@HostListener('paste', ['$event']) blockPaste(event: KeyboardEvent) {
this.validateFields(event);
}

validateFields(event) {
setTimeout(() => {

  this.el.nativeElement.value = this.el.nativeElement.value.replace(/[^A-Za-z ]/g, 
'').replace(/\s/g, '');
  event.preventDefault();

}, 100)
}

}

然后在mat-input中，我使用了声明specialIsAlphaNumeric

<mat-form-field color="accent">
                            <input
                                matInput specialIsAlphaNumeric
                                class="form-control"
                                placeholder="name"
                                [(ngModel)]="data.projectName"
                                name="name"
                                required
                                minlength="4"
                            />

                            <mat-error *ngIf="formControl.invalid">{{
                                getErrorMessage()
                            }}</mat-error>
                        </mat-form-field>

如何使用RegEx删除Mat-Input中的空格和特殊字符

1 个答案: