Syncfusion Angular Inputs 是一套用于 Angular 应用的输入类 UI 组件,资料重点介绍了 Uploader 与 NumericTextBox 两个组件,并给出安装、配置、API 与使用模式说明。
一、Uploader(文件上传组件) 用途:在 Angular 应用中实现文件上传,组件标签为 <ejs-uploader>,包名为 @syncfusion/ej2-angular-inputs。 主要能力:
- 异步上传:支持自动上传(默认)与手动上传(配合操作按钮),可配置 saveUrl、removeUrl。
- 分块上传:通过 asyncSettings.chunkSize 将大文件切分为可配置字节大小的分块,支持暂停、恢复、取消与重试(retryCount、retryAfterDelay),并提供 chunkSuccess、chunkFailure 等事件。
- 顺序上传:sequentialUpload 可逐个处理文件以减少服务器流量。
- 文件来源:浏览对话框、拖拽、剪贴板粘贴、目录选择(directoryUpload)。
- 校验:allowedExtensions 限制扩展名,minFileSize/maxFileSize 限制大小,可在 selected 事件中限制数量、防止重复上传,并支持 MIME 类型校验。
- 模板与自定义 UI:通过 template 自定义文件列表项,showFileList 隐藏默认列表以构建完全自定义上传界面,buttons 自定义按钮,可自定义进度条、上传前预览与压缩图片。
- 表单集成:支持 HTML 表单同步提交、模板驱动表单(ngModel)、响应式表单(FormGroup)及必填校验。
- 无障碍与本地化:符合 WCAG 2.2、Section 508,支持键盘导航、屏幕阅读器、RTL,并可通过 L10n 本地化静态文本。
- 高级模式:upload() 方法程序化上传、后台静默上传、customFormData 附加表单数据、JWT 认证、删除前确认、统计文件总大小、排序文件列表、从服务器打开编辑文件、图片转二进制等。 使用方式:安装 @syncfusion/ej2-angular-inputs,引入 UploaderModule,在模板中使用 <ejs-uploader> 并绑定 asyncSettings 等属性;需在 styles.css 中按顺序引入 ej2-base、ej2-buttons、ej2-inputs、ej2-popups、ej2-angular-inputs 的对应主题 CSS。资料给出 Angular 21+ 独立组件示例,并提示在生产流水线中安装前应校验包版本与完整性。 关键属性包括 asyncSettings、autoUpload、multiple、allowedExtensions、minFileSize、maxFileSize、files、dropArea、directoryUpload、sequentialUpload、showFileList、template、buttons、enabled、cssClass、enableRtl、enableHtmlSanitizer、dropEffect 等;关键事件包括 selected、uploading、success、failure、progress、removing、beforeRemove、beforeUpload、change、clearing、chunkSuccess、chunkFailure、chunkUploading、pausing、resuming、canceling、fileListRendering、actionComplete、created 等;关键方法包括 upload、remove、cancel、pause、resume、retry、clearAll、getFilesData、createFileList、sortFileList、bytesToSize、destroy。 典型场景:头像上传、文档上传门户、图片批量上传、API 认证的安全上传、含必填文件的表单。
二、NumericTextBox(数值输入框) 用途:用于输入数值的专用控件。 主要能力:
- 数值校验:支持 min/max 范围与 strictMode。
- 格式化:支持货币(如 c2)、百分比、数字等标准格式及自定义格式字符串,可控制小数位与货币符号。
- 微调按钮:showSpinButton 控制显示,step 配置步进值,可自定义上下箭头图标,支持方向键交互。
- 装饰模板:prependTemplate 与 appendTemplate 添加前缀/后缀,如货币符号、单位标签、操作按钮与状态指示。
- 表单集成:支持响应式表单与模板驱动表单,含自定义校验规则、错误与警告状态。
- 高级模式:聚焦时保留末尾零、禁止可空输入、可空输入配置、清除按钮行为、只读与禁用状态、focus/blur 事件、浮动标签类型(Always、Auto、Never)等。
- 无障碍与本地化:符合 WCAG 2.2 AA,具备 spinbutton 角色与 aria-valuemin/aria-valuemax 等 ARIA 属性,支持键盘导航、屏幕阅读器、RTL 与多区域数字格式,并提供 EJ1 到 EJ2 的 API 迁移指南。 使用方式:引入 NumericTextBoxModule,在模板中使用 <ejs-numerictextbox> 并设置 value、min、max、step、format、placeholder 等属性。
三、限制与说明 资料未提供收费、价格、平台支持范围、性能指标或具体服务端实现细节;部分内容以参考文档链接形式给出(如 getting-started.md、api.md 等),正文未展开全部细节。示例中的上传地址为占位符,需替换为实际端点;JWT 令牌不应硬编码,应通过安全认证服务获取并仅经 HTTPS 传输。