syncfusion-angular-numerictextbox（syncfusion Angular numerictextbox 命令行）

Implementing Syncfusion Angular NumericTextBox

Component Overview

The Syncfusion Angular NumericTextBox is a specialized input control for numeric values. It provides:

• Numeric validation with min/max ranges and strict mode
• Formatting (currency, percentage, decimals)
• Spin buttons for value adjustment
• Adornments (prepend/append templates for icons, labels)
• Accessibility (WCAG 2.2, ARIA, keyboard navigation)
• Localization (multiple cultures and RTL support)
• Form integration (reactive forms, template-driven forms)

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup
• Angular 21+ standalone component setup
• Basic NumericTextBox implementation
• CSS imports and theme configuration
• Range validation with min/max
• Simple formatting example
• Precision and decimals control
• Two-way binding setup
• Reactive forms integration

Formats and Number Styling

📄 Read: references/formats-styling.md

• Standard formats (currency c2, percentage p, numbers n)
• Custom numeric format strings
• Decimal place control
• Currency symbols and localization
• Styling NumericTextBox wrapper and icons
• CSS customization patterns

Spinners and Step Control

📄 Read: references/spinners-and-step.md

• Spin button visibility (showSpinButton)
• Step value configuration (step property)
• Customizing spin up/down arrow icons
• Arrow key interactions
• Disabling spin buttons

Adornments and Templates

📄 Read: references/adornments-and-templates.md

• Adding prefix/suffix with prependTemplate and appendTemplate
• Currency symbols and unit labels
• Action buttons and icons
• Status indicators without affecting validation
• Template usage patterns

Validation and Form Integration

📄 Read: references/validation-and-forms.md

• Range validation (min/max with strictMode)
• Custom validation rules
• Error and warning states
• Reactive forms patterns

Advanced Patterns and Edge Cases

📄 Read: references/advanced-patterns.md

• Maintaining trailing zeros on focus
• Preventing nullable input (always require a value)
• Nullable input configuration
• Clear button behavior
• Read-only and disabled states
• Focus and blur event handling
• Float label types (Always, Auto, Never)
• Performance optimization

Accessibility and Migration

📄 Read: references/accessibility-and-migration.md

• WCAG 2.2 Level AA compliance
• ARIA attributes (spinbutton role, aria-valuemin, aria-valuemax, etc.)
• Keyboard navigation (Arrow Up/Down)
• Screen reader support
• RTL support for right-to-left languages
• EJ1 to EJ2 API migration guide
• Localization and globalization

Globalization and Localization

📄 Read: references/globalization.md

• Locale property configuration
• Culture-specific number formatting
• RTL (right-to-left) support
• International number formats

API Reference

📄 Read: references/api.md

• All component properties with types, defaults, and descriptions
• All public methods with signatures and usage examples
• All events with argument interface details
• ChangeEventArgs, NumericBlurEventArgs, NumericFocusEventArgs interfaces
• Complete summary tables for quick lookup

Quick Start Example

import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { Component } from '@angular/core';

@Component({
  imports: [NumericTextBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-numerictextbox
      value="100"
      min="10"
      max="1000"
      step="5"
      format="c2"
      placeholder="Enter amount">
    </ejs-numerictextbox>
  `
})
export class AppComponent {}

Common Patterns

Currency Input with Validation

<ejs-numerictextbox
  value="50.00"
  format="c2"
  currency="USD"
  min="0"
  max="10000"
  decimals="2"
  strictMode="true">
</ejs-numerictextbox>

Percentage Input

<ejs-numerictextbox
  value="25"
  format="p"
  min="0"
  max="100"
  step="1">
</ejs-numerictextbox>

With Adornments (Unit Label)

<ejs-numerictextbox
  value="100"
  [appendTemplate]="appendUnit">
</ejs-numerictextbox>

<ng-template #appendUnit>
  <span class="unit-label">kg</span>
</ng-template>

Two-Way Binding with Form Control

<ejs-numerictextbox
  [(ngModel)]="quantity"
  min="1"
  max="100"
  step="1">
</ejs-numerictextbox>

Key Properties

Common Use Cases

1. E-Commerce Quantity Input — Product quantity selector with min/max validation
2. Financial Forms — Currency input with currency symbol and decimal places
3. Scientific Applications — High-precision decimal inputs
4. Survey/Form Data — Percentage inputs with 0-100 range
5. Multi-Language Support — Numbers formatted per user locale
6. Accessibility-First Forms — WCAG-compliant numeric inputs
7. Mobile-Friendly — Touch-friendly spin buttons and keyboard input

See Also

• Syncfusion Angular Input Controls
• Angular Forms Documentation
• WCAG 2.2 Accessibility Guidelines
• Syncfusion Theme Studio