一种基于Angular的多功能配置型输入方法及系统与流程

本发明公开一种基于angular的多功能配置型输入方法及系统，涉及ui设计领域和前端交互技术领域。

背景技术：

基于angular框架开发的前端组件库非常有限，开发者在进行框架选择时没有多样选项，该发明对输入框进行了全面的设计，主要特点包括：提供图标配置，可将图标自定义配置到输入框的指定位置；提供交互动画，输入框在聚焦、输入和失去焦点的时刻都有适当的动画予以反馈；提供输入提示和错误反馈机制，全程保障用户填写表单的成功率；提供输入内容的限制策略，例如仅限文本、数字、或者对输入的数字大小进行限制等。

目前基于angular开发的前端组件库最常用的就是ng-zorro-antd，开发者对组件库的选择缺乏多样性，导致前端项目开发中的一些需求可能无法匹配到合适的组件库。针对前端领域的组件库匮乏问题，特开发一套输入组件填充空白，先发明一种基于angular的多功能配置型输入方法及系统，以解决上述问题。

技术实现要素：

本发明针对现有技术的问题，提供一种基于angular的多功能配置型输入方法及系统，所采用的技术方案为：一种基于angular的多功能配置型输入方法，所述的方法具体步骤包括：

s1在brk-input选择器内创建brkinputcomponent组件；

s2设定brkinputcomponent组件交互动画功能；

s3设定brkinputcomponent组件对输入框值做合法性检查；

s4利用配置后的brkinputcomponent组件进行配置开发。

所述s1中的brkinputcomponent组件创建在根目录brk的input文件夹下。

所述s2引入@angular/animations模块设定brkinputcomponent组件交互动画功能，具体设定步骤如下：

s201判断输入框是否聚焦；

s202输入框失去焦点时，brkinputcomponent组件在输入框顶层放置div；

s203输入框聚焦时，brkinputcomponent组件对div进行调整编辑；

所述s3引入formsmodule模块和reactivemodule模块设定brkinputcomponent组件对输入框值做合法性检查，具体设定步骤如下：

s301创建响应式表单；

s302brkinputcomponent组件利用支持angular的内置验证器validators检查输入框值合法性；

s303brkinputcomponent组件利用自定义校验正则表达式对输入框内容进行判断。

一种基于angular的多功能配置型输入系统，所述的系统具体包括组件创建模块、交互设定模块、检查设定模块和组件应用模块：

组件创建模块：在brk-input选择器内创建brkinputcomponent组件；

交互设定模块：设定brkinputcomponent组件交互动画功能；

检查设定模块：设定brkinputcomponent组件对输入框值做合法性检查；

组件应用模块：利用配置后的brkinputcomponent组件进行配置开发。

所述组件创建模块中的brkinputcomponent组件创建在根目录brk的input文件夹下。

所述交互设定模块引入@angular/animations模块设定brkinputcomponent组件交互动画功能，交互设定模块具体包括判断模块、失焦处理模块和聚焦处理模块：

判断模块：判断输入框是否聚焦；

失焦处理模块：输入框失去焦点时，brkinputcomponent组件在输入框顶层放置div；

聚焦处理模块：输入框聚焦时，brkinputcomponent组件对div进行调整编辑；

所述检查设定模块引入formsmodule模块和reactivemodule模块设定brkinputcomponent组件对输入框值做合法性检查，检查设定模块具体包括响应创建模块、合法验证模块和自定义校验模块：

响应创建模块：创建响应式表单；

合法验证模块：brkinputcomponent组件利用支持angular的内置验证器validators检查输入框值合法性；

自定义校验模块：brkinputcomponent组件利用自定义校验正则表达式对输入框内容进行判断。

本发明的有益效果为：直接对原生html元素input进行封装，以模块的方式导出，开发者直接导入模块即可使用，简洁、快捷。

提供图标配置。图标可使用模块默认的iconfont字体库，也可以自行选择字体库进行下载，然后进行相关配置后方可使用。配置选项包括图标的位置、大小、颜色等，可根据开发需要进行适当的配置使用。

提供交互动画。良好的交互动画可以使用户的输入行为变得生动有趣，减少枯燥感，使用户体验自然、简洁，快捷。该组件通过控制提示文字的显示和隐藏、颜色的变化、文字位置的变化等方式为用户的输入提供良好的反馈机制。

提供错误反馈机制。糟糕的组件总是让用户在输入一大串的表单之后才给出不合格的输入提示，增加用户填写成本，极大有损体验。该组件尽可能的在输入之时即给出反馈，最大限度的提高用户体验。

内容输入的限制策略。开发者可能面临多种多样的输入场景：只限文本、只限某一个范围内的数字，限制输入字符串长度等，为减少开发者额外的逻辑编写，组建提供一些内置的合法性检查规则，开发者可以属性的方式引入使其生效。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本发明方法的流程图；

图2是本发明系统的结构示意图。

具体实施方式

下面结合附图和具体实施例对本发明作进一步说明，以使本领域的技术人员可以更好地理解本发明并能予以实施，但所举实施例不作为对本发明的限定。

实施例一：

一种基于angular的多功能配置型输入方法，所述的方法具体步骤包括：

s1在brk-input选择器内创建brkinputcomponent组件；

s2设定brkinputcomponent组件交互动画功能；

s3设定brkinputcomponent组件对输入框值做合法性检查；

s4利用配置后的brkinputcomponent组件进行配置开发；

在使用本发明方法进行多功能配置型输入时，首先引入angular基础模块，然后使用装饰器@component按照s1在brk-input选择器内创建brkinputcomponent组件：

然后创建brk-input.component.html文件，增加相关配置属性，按照s2brkinputcomponent组件交互动画功能，按照s3设定brkinputcomponent组件对输入框值做合法性检查，增加相关配置属性，其中，type即为输入框的文本类型，同原生；placeholder为提示内容，同原生；disabled为是否禁用该输入框，同原生；title为输入框的标题，可被用户设置为“用户名”、“密码”等；icon为图标配置，组建提供了一些默认字体，可输入user、lock等单词直接使用一些常用的图标。

以加载icon的实现过程为例，简单描述组件属性的工作原理。首先，brkmodule会引入一个图标库，brk-input支持该图标库中的所有图标。icon属性允许传入图标库中一个图标的类名，组件内部接受到该类名后，会填补到html代码中，继而在组件左侧生成一个图标。

以下是组件的示例用法和组件接收属性值的部分代码：

最后按照s4利用配置后的brkinputcomponent组件进行配置开发即可；

本发明方法所提供的基于angular的多功能配置型输入组件，具有以下有益效果：

直接对原生html元素input进行封装，以模块的方式导出，开发者直接导入模块即可使用，简洁、快捷。

提供图标配置。图标可使用模块默认的iconfont字体库，也可以自行选择字体库进行下载，然后进行相关配置后方可使用。配置选项包括图标的位置、大小、颜色等，可根据开发需要进行适当的配置使用。

提供交互动画。良好的交互动画可以使用户的输入行为变得生动有趣，减少枯燥感，使用户体验自然、简洁，快捷。该组件通过控制提示文字的显示和隐藏、颜色的变化、文字位置的变化等方式为用户的输入提供良好的反馈机制。

提供错误反馈机制。糟糕的组件总是让用户在输入一大串的表单之后才给出不合格的输入提示，增加用户填写成本，极大有损体验。该组件尽可能的在输入之时即给出反馈，最大限度的提高用户体验。

内容输入的限制策略。开发者可能面临多种多样的输入场景：只限文本、只限某一个范围内的数字，限制输入字符串长度等，为减少开发者额外的逻辑编写，组建提供一些内置的合法性检查规则，开发者可以属性的方式引入使其生效；

进一步的，所述s1中的brkinputcomponent组件创建在根目录brk的input文件夹下；

进一步的，所述s2引入@angular/animations模块设定brkinputcomponent组件交互动画功能，具体设定步骤如下：

s201判断输入框是否聚焦；

s202输入框失去焦点时，brkinputcomponent组件在输入框顶层放置div；

s203输入框聚焦时，brkinputcomponent组件对div进行调整编辑；

为组件添加交互动画。该功能的添加需要引入@angular/animations模块，使用angular动画的trigger、state等特性定义交互效果。实现过程简述如下：

该组件的动画实现主要依靠两个trigger，每个trigger分别对应多种state。trigger1针对输入框标题，trigger2针对输入框。trigger1主要包含两个state，聚焦和失焦。聚焦状态下，通过css控制字体漂浮至输入框左上方，同时缩放字体，调为蓝色，以突出输入框位置，引导用户将注意力放到内容的填写上。失焦时，组件会根据输入框是否为空，判断是否将标题回归原位。trigger2同样包含两个state，聚焦和失焦。聚焦状态下，通过css控制输入框border为蓝色，加粗一像素，失焦状态下，组件会根据输入框是否为空，判断是否取消border的高亮状态；

再进一步的，所述s3引入formsmodule模块和reactivemodule模块设定brkinputcomponent组件对输入框值做合法性检查，具体设定步骤如下：

s301创建响应式表单；

s302brkinputcomponent组件利用支持angular的内置验证器validators检查输入框值合法性。

s303brkinputcomponent组件利用自定义校验正则表达式对输入框内容进行判断；

设置输入合法性检查规则。该组件内置一些常用的输入检查规则，例如用户名长度、密码规则等等；

所有的检查规则来自于两部分，一部分来自于@angular/forms模块，一部分来自于组件自定义。@angular/forms模块提供validators验证器，可用于各种表单控件。该组件支持validators提供的常见校验规则，如必填项、正则匹配、字符串长度等。除此之外，组件提供一系列自定义的校验规则，主要使用正则表达式对用户输入进行判断，包括邮件地址、日期、身份证号、中英文字符串、手机号码等常见填写项的验证。

以用户名的规则为例，部分代码如下：

实施例二：

一种基于angular的多功能配置型输入系统，所述的系统具体包括组件创建模块、交互设定模块、检查设定模块和组件应用模块：

组件创建模块：在brk-input选择器内创建brkinputcomponent组件；

交互设定模块：设定brkinputcomponent组件交互动画功能；

检查设定模块：设定brkinputcomponent组件对输入框值做合法性检查；

组件应用模块：利用配置后的brkinputcomponent组件进行配置开发；

在使用本发明系统进行多功能配置型输入时，首先引入angular基础模块，然后使用装饰器@component利用组件创建模块在brk-input选择器内创建brkinputcomponent组件：

然后创建brk-input.component.html文件，增加相关配置属性，通过交互设定模块设定brkinputcomponent组件交互动画功能，通过检查设定模块设定brkinputcomponent组件对输入框值做合法性检查，增加相关配置属性，其中，type即为输入框的文本类型，同原生；placeholder为提示内容，同原生；disabled为是否禁用该输入框，同原生；title为输入框的标题，可被用户设置为“用户名”、“密码”等；icon为图标配置，组建提供了一些默认字体，可输入user、lock等单词直接使用一些常用的图标。

以加载icon的实现过程为例，简单描述组件属性的工作原理。首先，brkmodule会引入一个图标库，brk-input支持该图标库中的所有图标。icon属性允许传入图标库中一个图标的类名，组件内部接受到该类名后，会填补到html代码中，继而在组件左侧生成一个图标。

以下是组件的示例用法和组件接收属性值的部分代码：

最后通过组件应用模块利用配置后的brkinputcomponent组件进行配置开发即可；

本发明系统所提供的基于angular的多功能配置型输入组件，具有以下有益效果：

直接对原生html元素input进行封装，以模块的方式导出，开发者直接导入模块即可使用，简洁、快捷。

提供图标配置。图标可使用模块默认的iconfont字体库，也可以自行选择字体库进行下载，然后进行相关配置后方可使用。配置选项包括图标的位置、大小、颜色等，可根据开发需要进行适当的配置使用。

提供交互动画。良好的交互动画可以使用户的输入行为变得生动有趣，减少枯燥感，使用户体验自然、简洁，快捷。该组件通过控制提示文字的显示和隐藏、颜色的变化、文字位置的变化等方式为用户的输入提供良好的反馈机制。

提供错误反馈机制。糟糕的组件总是让用户在输入一大串的表单之后才给出不合格的输入提示，增加用户填写成本，极大有损体验。该组件尽可能的在输入之时即给出反馈，最大限度的提高用户体验。

内容输入的限制策略。开发者可能面临多种多样的输入场景：只限文本、只限某一个范围内的数字，限制输入字符串长度等，为减少开发者额外的逻辑编写，组建提供一些内置的合法性检查规则，开发者可以属性的方式引入使其生效；

进一步的，所述组件创建模块中的brkinputcomponent组件创建在根目录brk的input文件夹下；

进一步的，所述交互设定模块引入@angular/animations模块设定brkinputcomponent组件交互动画功能，交互设定模块具体包括判断模块、失焦处理模块和聚焦处理模块：

判断模块：判断输入框是否聚焦；

失焦处理模块：输入框失去焦点时，brkinputcomponent组件在输入框顶层放置div；

聚焦处理模块：输入框聚焦时，brkinputcomponent组件对div进行调整编辑；

为组件添加交互动画。该功能的添加需要引入@angular/animations模块，使用angular动画的trigger、state等特性定义交互效果。实现过程简述如下：

该组件的动画实现主要依靠两个trigger，每个trigger分别对应多种state。trigger1针对输入框标题，trigger2针对输入框。trigger1主要包含两个state，聚焦和失焦。聚焦状态下，通过css控制字体漂浮至输入框左上方，同时缩放字体，调为蓝色，以突出输入框位置，引导用户将注意力放到内容的填写上。失焦时，组件会根据输入框是否为空，判断是否将标题回归原位。trigger2同样包含两个state，聚焦和失焦。聚焦状态下，通过css控制输入框border为蓝色，加粗一像素，失焦状态下，组件会根据输入框是否为空，判断是否取消border的高亮状态；

再进一步的，所述检查设定模块引入formsmodule模块和reactivemodule模块设定brkinputcomponent组件对输入框值做合法性检查，检查设定模块具体包括响应创建模块、合法验证模块和自定义校验模块：

响应创建模块：创建响应式表单；

合法验证模块：brkinputcomponent组件利用支持angular的内置验证器validators检查输入框值合法性。

自定义校验模块：brkinputcomponent组件利用自定义校验正则表达式对输入框内容进行判断；

设置输入合法性检查规则。该组件内置一些常用的输入检查规则，例如用户名长度、密码规则等等；

所有的检查规则来自于两部分，一部分来自于@angular/forms模块，一部分来自于组件自定义。@angular/forms模块提供validators验证器，可用于各种表单控件。该组件支持validators提供的常见校验规则，如必填项、正则匹配、字符串长度等。除此之外，组件提供一系列自定义的校验规则，主要使用正则表达式对用户输入进行判断，包括邮件地址、日期、身份证号、中英文字符串、手机号码等常见填写项的验证。

以用户名的规则为例，部分代码如下：

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。