syncfusion-angular-numerictextbox

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular NumericTextBox

实现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)

Syncfusion Angular NumericTextBox是专门用于数值输入的控件，它提供以下能力：

带最小/最大范围和严格模式的数字验证
格式化（货币、百分比、小数）
用于调整数值的增减按钮（Spin buttons）
装饰元素（Adornments）（可配置图标、标签的前置/后置模板）
无障碍支持（WCAG 2.2、ARIA、键盘导航）
本地化（多文化和RTL支持）
表单集成（响应式表单、模板驱动表单）

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

📄 阅读： references/getting-started.md

安装与包配置
Angular 21+ 独立组件设置
基础NumericTextBox实现
CSS导入与主题配置
基于min/max的范围验证
简单格式化示例
精度与小数位控制
双向绑定设置
响应式表单集成

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

📄 阅读： references/formats-styling.md

标准格式（货币
```
c2
```
、百分比
```
p
```
、数字
```
n
```
）
自定义数字格式字符串
小数位控制
货币符号与本地化
NumericTextBox容器和图标的样式设置
CSS自定义模式

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

📄 阅读： references/spinners-and-step.md

增减按钮显隐控制（
```
showSpinButton
```
）
步长值配置（
```
step
```
属性）
自定义增减箭头图标
方向键交互逻辑
禁用增减按钮

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

📄 阅读： references/adornments-and-templates.md

通过
```
prependTemplate
```
和
```
appendTemplate
```
添加前缀/后缀
货币符号与单位标签
操作按钮与图标
不影响验证逻辑的状态指示器
模板使用模式

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

📄 阅读： references/validation-and-forms.md

范围验证（结合strictMode的min/max校验）
自定义校验规则
错误与警告状态
响应式表单使用模式

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

📄 阅读： references/advanced-patterns.md

聚焦时保留末尾零
禁止空值输入（始终要求填写数值）
空值输入配置
清空按钮行为
只读与禁用状态
聚焦与失焦事件处理
浮动标签类型（始终显示、自动、从不显示）
性能优化

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

📄 阅读： references/accessibility-and-migration.md

WCAG 2.2 AA级合规
ARIA属性（spinbutton角色、aria-valuemin、aria-valuemax等）
键盘导航（上下方向键）
屏幕阅读器支持
针对从右到左书写语言的RTL支持
EJ1到EJ2的API迁移指南
本地化与全球化

Globalization and Localization

全球化与本地化

📄 Read: references/globalization.md

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

📄 阅读： references/globalization.md

地区属性配置
适配文化的数字格式化
RTL（从右到左）支持
国际化数字格式

API Reference

API参考

📄 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

📄 阅读： references/api.md

所有组件属性的类型、默认值和说明
所有公共方法的签名和使用示例
所有事件的参数接口详情

ChangeEventArgs

、

NumericBlurEventArgs

、

NumericFocusEventArgs

接口

便于快速查找的完整汇总表

Quick Start Example

快速开始示例

typescript

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 {}

typescript

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

带验证的货币输入

typescript

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

typescript

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

Percentage Input

百分比输入

typescript

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

typescript

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

With Adornments (Unit Label)

带装饰元素（单位标签）

typescript

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

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

typescript

<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

结合表单控件的双向绑定

typescript

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

typescript

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

Key Properties

核心属性

Property	Type	Purpose	Default
`value`	number	Current numeric value	`null`
`min`	number	Minimum allowed value	`Number.MIN_VALUE`
`max`	number	Maximum allowed value	`Number.MAX_VALUE`
`step`	number	Increment/decrement amount	`1`
`decimals`	number	Decimal places allowed	`null`
`format`	string	Number format (e.g., 'c2', 'n2', 'p')	`null`
`currency`	string	Currency code (e.g., 'USD', 'EUR')	`null`
`strictMode`	boolean	Enforce min/max validation	`false`
`showSpinButton`	boolean	Show up/down spinner buttons	`true`
`showClearButton`	boolean	Show clear button	`false`
`readonly`	boolean	Prevent editing	`false`
`disabled`	boolean	Disable the component	`false`
`locale`	string	Culture code (e.g., 'de-DE', 'fr-FR')	`'en-US'`
`enableRtl`	boolean	Enable right-to-left mode	`false`
`placeholder`	string	Hint text	`null`
`floatLabelType`	string	Label float behavior ('Auto', 'Always', 'Never')	`'Never'`

属性	类型	用途	默认值
`value`	number	当前数值	`null`
`min`	number	允许的最小值	`Number.MIN_VALUE`
`max`	number	允许的最大值	`Number.MAX_VALUE`
`step`	number	增减步长	`1`
`decimals`	number	允许的小数位数	`null`
`format`	string	数字格式（例如'c2'、'n2'、'p'）	`null`
`currency`	string	货币代码（例如'USD'、'EUR'）	`null`
`strictMode`	boolean	强制开启min/max验证	`false`
`showSpinButton`	boolean	显示上下增减按钮	`true`
`showClearButton`	boolean	显示清空按钮	`false`
`readonly`	boolean	禁止编辑	`false`
`disabled`	boolean	禁用组件	`false`
`locale`	string	地区代码（例如'de-DE'、'fr-FR'）	`'en-US'`
`enableRtl`	boolean	开启从右到左显示模式	`false`
`placeholder`	string	提示文本	`null`
`floatLabelType`	string	标签浮动行为（'Auto'、'Always'、'Never'）	`'Never'`

Common Use Cases

常见使用场景

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

电商数量输入 — 带最小/最大值验证的商品数量选择器
金融表单 — 带货币符号和小数位控制的货币输入
科学计算应用 — 高精度小数输入
问卷/表单数据收集 — 范围在0-100的百分比输入
多语言支持场景 — 按照用户地区格式化数字
无障碍优先的表单 — 符合WCAG标准的数字输入
移动端适配场景 — 适合触控的增减按钮和键盘输入

syncfusion-angular-numerictextbox

Original

Translation

Implementing Syncfusion Angular NumericTextBox

实现Syncfusion Angular NumericTextBox

Component Overview

组件概述

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门

Formats and Number Styling

格式与数字样式

Spinners and Step Control

增减器与步长控制

Adornments and Templates

装饰元素与模板

Validation and Form Integration

验证与表单集成

Advanced Patterns and Edge Cases

高级模式与边界场景

Accessibility and Migration

无障碍与迁移

Globalization and Localization

全球化与本地化

API Reference

API参考

Quick Start Example

快速开始示例

Common Patterns

常用模式

Currency Input with Validation

带验证的货币输入

Percentage Input

百分比输入

With Adornments (Unit Label)

带装饰元素（单位标签）

Two-Way Binding with Form Control

结合表单控件的双向绑定

Key Properties

核心属性

Common Use Cases

常见使用场景

See Also

相关参考