特殊字符不应该允许在反应形式中的第一个字符 - Angular 7答案

【问题标题】：Special Characters should not allow in first character in Reactive forms- Angular 7特殊字符不应该允许在反应形式中的第一个字符 - Angular 7
【发布时间】：2019-04-11 08:04:27
【问题描述】：

这里有一个小场景，用户不应该输入特殊字符作为起始字符。此后他们应该被允许。

component.ts

this.new_org = this.fb.group({
    firstName: [this.data.name, [Validators.required, Validators.minLength(8),Validators.pattern('^[a-zA-Z \-\']+')]],
});

component.html

<mat-form-field appearance="outline" fxFlex="100%">
  <mat-label>Name</mat-label>
  <input class="add-org" matInput placeholder="" formControlName="firstName" type="text" required>
</mat-form-field>
<mat-error
  *ngIf="new_org.get('firstName').hasError('minlength') || new_org.get('firstName').hasError('pattern')">
  <span style="color:red;font-family:Open-Sans">Name must be 8 characters Long!.Special characters(@,#,!) and Numbers
    are not allowed.</span>
</mat-error>

如何限制第一个输入字符中的特殊字符？

【问题讨论】：

标签： angular typescript

【解决方案1】：

Validators.pattern('^[a-zA-Z \-\']') 在正则表达式中没有加号应该可以工作

【讨论】：

【解决方案2】：

您可以创建自定义验证器

import { FormControl } from '@angular/forms';

export function ValidateString(control: FormControl) {
    let pattern = /[*\\/|":?><]/gi; // can change regex with your requirement
    //if validation fails, return error name & value of true
    if (pattern.test(control.value)) {
        return { validString: true };
    }
    //otherwise, if the validation passes, we simply return null
    return null;
}

并更新您的表单

organisationName: [this.data.name, [Validators.required, Validators.minLength(8),ValidateString]],

【讨论】：

我们可以通过任何简单的方法来实现这一要求
这样使用可以在另一个控件和表单中重用验证器

【解决方案3】：

您已经有一个模式验证器，因此您可以简单地将正则表达式更新为适合您要求的内容。当前的正则表达式 (^[a-zA-Z \-\']+) 允许所有常规字母和以下字符 \、-、'、。

您可以使用这样的正则表达式：^\w.* 来确保第一个字符是常规字符 (a-zA-Z)，而其他每个字符都可以是任何字符。

更新：

不允许在第一个字符后使用数字的正则表达式，但其他任何内容： ^[a-zA-Z][^0-9]*$

您可以使正则表达式变得尽可能大和复杂。

【讨论】：

它也不应该允许数字:)
@Rajesh 我已经更新了答案。您只需要找到合适的 RegEx 来满足您的要求。网上有很多资源可以帮助您找到完美的 RegEx。