Когда дело доходит до проверки пользовательского ввода в приложениях Angular, ограничение ввода только числами является распространенным требованием. Независимо от того, создаете ли вы форму, калькулятор или любое другое приложение, работающее с числовыми данными, решающее значение имеет обеспечение того, чтобы пользователи могли вводить только действительные числа. В этой статье блога мы рассмотрим различные методы ввода только чисел в Angular, используя разговорный язык и практические примеры кода.

Метод 1: использование форм на основе шаблонов
Формы Angular на основе шаблонов предоставляют простой способ реализовать проверку ввода только чисел. Используя директиву ngModel и типы ввода HTML, мы можем легко ограничить ввод числами.

<input type="number" name="quantity" [(ngModel)]="quantity" />

Метод 2: реактивные формы с настраиваемыми валидаторами
Реактивные формы обеспечивают большую гибкость и контроль над проверкой входных данных. Мы можем создать специальную функцию проверки, чтобы обеспечить ввод только чисел, проверяя входное значение по регулярному выражению.

import { Validators } from '@angular/forms';
const numberOnlyValidator = Validators.pattern('^[0-9]*$');
// Inside the form definition
this.form = this.formBuilder.group({
  quantity: ['', [numberOnlyValidator]]
});

Метод 3: использование директивы для ввода только чисел
Создание пользовательской директивы обеспечивает возможность повторного использования кода и более чистую структуру компонентов. Давайте создадим директиву Angular, которая ограничивает ввод только числами.

import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
  selector: '[appNumbersOnly]'
})
export class NumbersOnlyDirective {
  constructor(private el: ElementRef) { }
  @HostListener('input', ['$event']) onInputChange(event: KeyboardEvent) {
    const inputValue = this.el.nativeElement.value;
    this.el.nativeElement.value = inputValue.replace(/[^0-9]/g, '');
    event.preventDefault();
  }
}

Использование:

<input type="text" appNumbersOnly />

В этой статье мы рассмотрели несколько методов реализации проверки ввода только чисел в Angular. Мы рассмотрели формы на основе шаблонов, реактивные формы с настраиваемыми валидаторами и использование настраиваемых директив. Каждый подход имеет свои преимущества в зависимости от сложности и требований вашего приложения. Используя эти методы, вы можете гарантировать, что пользователи смогут вводить только действительные числа, улучшая взаимодействие с пользователем и целостность данных в ваших приложениях Angular.