Блог

Главная - Вопросы по программированию - Специальные символы не должны допускаться в первом символе в реактивных формах — Angular 7

Специальные символы не должны допускаться в первом символе в реактивных формах — Angular 7

#angular #typescript

#angular #typescript

Вопрос:

Здесь у меня есть один небольшой сценарий, в котором пользователь не должен иметь возможности вводить специальный символ в качестве начального символа. После этого они должны быть разрешены.

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>

Как я могу ограничить специальные символы в первом введенном символе?

Ответ №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 amp; 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]],

Комментарии:

1. Любой простой способ, которым мы можем выполнить это требование

2. таким образом, использование может повторно использовать валидатор в другом элементе управления и форме

Ответ №3:

У вас уже есть средство проверки шаблонов, поэтому вы можете просто обновить регулярное выражение до того, что соответствует вашим требованиям. Текущее регулярное выражение ( ^[a-zA-Z -'] ) допускает все обычные буквы и следующие символы , - , ' , .

Вы можете использовать регулярное выражение следующим образом: ^w.* чтобы убедиться, что первый символ является обычным символом (a-zA-Z), а любой другой символ может быть любым.

Обновить:

Регулярное выражение, которое не допускает числа после первого символа, но что-нибудь еще: ^[a-zA-Z][^0-9]*$

Вы можете сделать регулярное выражение настолько большим и сложным, насколько вам заблагорассудится.

Комментарии:

1. он также не должен допускать числа 🙂

2. @Rajesh я обновил ответ. Вам нужно только найти правильное регулярное выражение, соответствующее вашим требованиям. В Интернете есть много ресурсов, которые помогут вам найти идеальное регулярное выражение.