syncfusion-angular-numerictextbox

用途

Syncfusion Angular NumericTextBox 是 Syncfusion 提供的 Angular 数值输入控件，用于在表单和界面中接收、显示与校验数字值。本技能是一份实现指南，围绕该组件提供分主题的参考文档导航、快速上手示例与常见用法模式。

主要能力

• 数值校验：支持 min/max 范围限制，以及 strictMode 严格模式。
• 格式化：支持货币（如 c2）、百分比（p）、数字（n）等标准格式，以及自定义数字格式字符串、小数位控制、货币符号与本地化。
• 微调按钮：通过 showSpinButton 控制上下微调按钮显示，step 配置步进值，可自定义上下箭头图标、处理方向键交互、禁用微调按钮。
• 装饰模板：通过 prependTemplate 与 appendTemplate 添加前缀/后缀，如货币符号、单位标签、操作按钮与图标、状态指示。
• 无障碍：符合 WCAG 2.2 Level AA，提供 ARIA 属性（spinbutton 角色、aria-valuemin、aria-valuemax 等）、键盘导航（上下方向键）、屏幕阅读器支持。
• 本地化与全球化：locale 属性配置、文化相关数字格式、RTL 从右到左支持、国际数字格式。
• 表单集成：支持响应式表单与模板驱动表单，支持双向绑定。

使用方式

安装与包配置、Angular 21+ 独立组件设置、CSS 导入与主题配置等步骤见 references/getting-started.md。快速上手示例：

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

常见模式包括：带校验的货币输入（format="c2"、currency="USD"、min/max、decimals、strictMode）、百分比输入（format="p"、min=0、max=100、step=1）、带单位标签的装饰模板（appendTemplate）、与表单控件的双向绑定（[(ngModel)]）。

关键属性包括：value、min、max、step、decimals、format、currency、strictMode、showSpinButton、showClearButton、readonly、disabled、locale、enableRtl、placeholder、floatLabelType。

适用场景

• 电商数量输入：带 min/max 校验的商品数量选择。
• 财务表单：带货币符号与小数位的金额输入。
• 科学应用：高精度小数输入。
• 调查/表单数据：0–100 范围的百分比输入。
• 多语言支持：按用户区域格式化数字。
• 无障碍优先表单：符合 WCAG 的数值输入。
• 移动端友好：适合触摸的微调按钮与键盘输入。

限制

资料未提供该组件的收费、价格、性能指标或具体平台兼容性细节，相关内容暂未提供。文档导航涵盖 getting-started、formats-styling、spinners-and-step、adornments-and-templates、validation-and-forms、advanced-patterns、accessibility-and-migration、globalization、api 等参考文件。