Angular Form точная проверка шаблона 10 буквенно-цифровых букв

У меня есть следующая проблема с этим конкретным вариантом использования проверки поля реактивной формы.

На данный момент я установил только это правило:

this.projectForm = this.fb.group({
  .....................................................................................,
  .....................................................................................,
  .....................................................................................,
  CIG: [null, [Validators.required, Validators.minLength(10),Validators.maxLength(10)]],

на данный момент я проверяю, имеет ли значение, вставленное в мое поле формы CIG, ровно 10 символов длины.

Моя проблема в том, что я должен также проверить, что это буквенно-цифровая строка (состоящая ровно из 10 символов).

Таким образом, что-то вроде этого разрешено: ABCED12345, но что-то вроде этого не разрешено: ABCD-12345.

Как реализовать такое поведение с помощью валидаторов? Мне нужно использовать REGEX или что-то в этом роде?


angular angular-reactive-forms angular-validation
person AndreaNobili    schedule 24.08.2020    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Для этого вы можете использовать Angular Reactive Form валидаторы шаблонов.

validPattern = "^[a-zA-Z0-9]{10}$"; // alphanumeric exact 10 letters
this.projectForm = this.fb.group({
 ...
 CIG: [null, [Validators.required, Validators.pattern(this.validPattern)],

Надеюсь, это решит вашу проблему.

person Kamran Khatti    schedule 24.08.2020
comment
Вы спасли мою жизнь - person hosam hemaily; 15.12.2020

arrow_upward
1
arrow_downward

Вы также можете создать свою собственную функцию валидатора, если хотите больше контролировать свои сообщения об ошибках, и добавить ее в свой массив валидаторов. Такой функцией может быть что-то вроде:

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

const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9_]*$/;
const ALPHA_NUMERIC_VALIDATION_ERROR = { alphaNumericError: 'only alpha numeric values are allowed' }

function alphaNumericValidator(control: FormControl): ValidationErrors | null {
    return ALPHA_NUMERIC_REGEX.test(control.value) ? null : ALPHA_NUMERIC_VALIDATION_ERROR;
}

И добавьте его в свой список валидаторов вот так: вот так:

[Validators.required, Validators.minLength(10),Validators.maxLength(10), alphaNumericValidator]

Для получения дополнительной информации о пользовательских валидаторах angular: пользовательские валидаторы

person ben marder    schedule 24.08.2020