一种基于Angular的多功能配置型输入方法及系统技术方案

本发明专利技术公开了一种基于Angular的多功能配置型输入方法及系统，属于UI设计领域和前端交互领域；所述的方法具体步骤包括：S1在brk‑input选择器内创建BrkInputComponent组件；S2设定BrkInputComponent组件交互动画功能；S3设定BrkInputComponent组件对输入框值做合法性检查；S4利用配置后的BrkInputComponent组件进行配置开发；通过图标配置、动画交互、输入反馈和限制策略等配置方式为开发者提供方便，提高可用性和易用性。

【技术实现步骤摘要】
一种基于Angular的多功能配置型输入方法及系统
本专利技术公开一种基于Angular的多功能配置型输入方法及系统，涉及UI设计领域和前端交互

技术介绍
基于Angular框架开发的前端组件库非常有限，开发者在进行框架选择时没有多样选项，该专利技术对输入框进行了全面的设计，主要特点包括：提供图标配置，可将图标自定义配置到输入框的指定位置；提供交互动画，输入框在聚焦、输入和失去焦点的时刻都有适当的动画予以反馈；提供输入提示和错误反馈机制，全程保障用户填写表单的成功率；提供输入内容的限制策略，例如仅限文本、数字、或者对输入的数字大小进行限制等。目前基于Angular开发的前端组件库最常用的就是ng-zorro-antd，开发者对组件库的选择缺乏多样性，导致前端项目开发中的一些需求可能无法匹配到合适的组件库。针对前端领域的组件库匮乏问题，特开发一套输入组件填充空白，先专利技术一种基于Angular的多功能配置型输入方法及系统，以解决上述问题。
技术实现思路
本专利技术针对现有技术的问题，提供一种基于Angula本文档来自技高网...

【技术保护点】
1.一种基于Angular的多功能配置型输入方法，其特征是所述的方法具体步骤包括：/nS1在brk-input选择器内创建BrkInputComponent组件；/nS2设定BrkInputComponent组件交互动画功能；/nS3设定BrkInputComponent组件对输入框值做合法性检查；/nS4利用配置后的BrkInputComponent组件进行配置开发。/n

【技术特征摘要】
1.一种基于Angular的多功能配置型输入方法，其特征是所述的方法具体步骤包括：
S1在brk-input选择器内创建BrkInputComponent组件；
S2设定BrkInputComponent组件交互动画功能；
S3设定BrkInputComponent组件对输入框值做合法性检查；
S4利用配置后的BrkInputComponent组件进行配置开发。


2.根据权利要求1所述的方法，其特征是所述S1中的BrkInputComponent组件创建在根目录brk的input文件夹下。


3.根据权利要求2所述的方法，其特征是所述S2引入@angular/animations模块设定BrkInputComponent组件交互动画功能，具体设定步骤如下：
S201判断输入框是否聚焦；
S202输入框失去焦点时，BrkInputComponent组件在输入框顶层放置DIV；
S203输入框聚焦时，BrkInputComponent组件对DIV进行调整编辑。


4.根据权利要求2或3所述的方法，其特征是所述S3引入FormsModule模块和ReactiveModule模块设定BrkInputComponent组件对输入框值做合法性检查，具体设定步骤如下：
S301创建响应式表单；
S302BrkInputComponent组件利用支持Angular的内置验证器Validators检查输入框值合法性；
S303BrkInputComponent组件利用自定义校验正则表达式对输入框内容进行判断。


5.一种基于Angular的多功能配置型输入系统，其特征是所述的系统具体包括组件创建模块、交互设定模块、...

【专利技术属性】
技术研发人员：颜冬冬，寇立强，陶金铸，孙思清，高传集，
申请(专利权)人：浪潮云信息技术股份公司，
类型：发明
国别省市：山东;37