В Angular проверка чисел является распространенным требованием при работе с формами. Независимо от того, используете ли вы реактивные формы или формы на основе шаблонов, есть несколько методов, которые вы можете использовать, чтобы гарантировать, что пользовательский ввод является допустимым числом. В этой статье будут рассмотрены различные методы проверки чисел в Angular, а также приведены примеры кода.
- Встроенные валидаторы:
Angular предоставляет несколько встроенных валидаторов, которые можно использовать для проверки чисел:
a) Требуемый валидатор:
this.myForm = new FormGroup({
myNumber: new FormControl('', Validators.required)
});
b) Валидаторы минимального и максимального значения:
this.myForm = new FormGroup({
myNumber: new FormControl('', [Validators.min(0), Validators.max(100)])
});
- Пользовательские валидаторы.
Вы можете создавать собственные валидаторы для выполнения более сложной логики проверки чисел. Вот пример пользовательского валидатора, который проверяет, делится ли число на заданный делитель:
function divisibleByValidator(divisor: number): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
const value = control.value;
if (isNaN(value) || value % divisor !== 0) {
return { divisibleBy: true };
}
return null;
};
}
this.myForm = new FormGroup({
myNumber: new FormControl('', divisibleByValidator(5))
});
- Регулярные выражения.
Регулярные выражения можно использовать для проверки числовых шаблонов. Вот пример средства проверки регулярных выражений, которое проверяет число ровно с двумя десятичными знаками:
const decimalPattern = /^\d+\.?\d{0,2}$/;
this.myForm = new FormGroup({
myNumber: new FormControl('', [Validators.pattern(decimalPattern)])
});
В этой статье мы рассмотрели различные методы проверки чисел в Angular. Мы рассмотрели использование встроенных валидаторов, пользовательских валидаторов и регулярных выражений. Используя эти методы, вы можете гарантировать, что вводимые пользователем данные действительны и соответствуют вашим конкретным требованиям к проверке номера.