CN110764866A - 一种Angular响应式表单控件联动的实现方法及系统 - Google Patents

一种Angular响应式表单控件联动的实现方法及系统 Download PDF

Info

Publication number
CN110764866A
CN110764866A CN201911053238.XA CN201911053238A CN110764866A CN 110764866 A CN110764866 A CN 110764866A CN 201911053238 A CN201911053238 A CN 201911053238A CN 110764866 A CN110764866 A CN 110764866A
Authority
CN
China
Prior art keywords
input
controls
formcontrol
angular
bound
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201911053238.XA
Other languages
English (en)
Inventor
周睿
刘牧
高传集
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Inspur Cloud Information Technology Co Ltd
Original Assignee
Inspur Cloud Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Inspur Cloud Information Technology Co Ltd filed Critical Inspur Cloud Information Technology Co Ltd
Priority to CN201911053238.XA priority Critical patent/CN110764866A/zh
Publication of CN110764866A publication Critical patent/CN110764866A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种Angular响应式表单控件联动的实现方法及系统，属于前端Angular技术框架技术领域。本发明的Angular响应式表单控件联动的实现方法，该方法将多个输入控件绑定到同一个FormControl下，用户在界面通过绑定的输入控件输入时，触发FormControl的valueChanges，valueChanges监听输入值的变化情况，同时更新FormControl下绑定的全部控件的显示的值。该发明的Angular响应式表单控件联动的实现方法提高了Angular低版本代码对高版本的兼容性，并且操作简洁，能够有效的减少工作量，具有很好的推广应用价值。

Description

一种Angular响应式表单控件联动的实现方法及系统
技术领域
本发明涉及前端Angular技术框架技术领域，具体提供一种Angular响应式表单控件联动的实现方法及系统。
背景技术
Angularv7以及以上版本中，不支持将ngModel输入属性和ngModelChange事件与响应式表单指令一起使用。假如有个响应式表单中，我们想获取某一个数量，我们既可以通过进度条拖拽组件，获取输入数据，也能通过input输入框输入数据。Angular v2～v6可以在进度条和输入框上都绑定[(ngModel)]、formControlName，来实现输入数据的联动。但是Angularv7以上版本不再支持这种写法，当开发人员遇到以上那种情况，可能会不知道怎么处理来应对这种情况，有待进一步的改进。
发明内容
本发明的技术任务是针对上述存在的问题，提供一种提高了Angular低版本代码对高版本的兼容性，并且操作简洁，能够有效的减少工作量的Angular响应式表单控件联动的实现方法。
本发明进一步的技术任务是提供一种Angular响应式表单控件联动的实现系统。
为实现上述目的，本发明提供了如下技术方案：
一种Angular响应式表单控件联动的实现方法，该方法将多个输入控件绑定到同一个FormControl下，用户在界面通过绑定的输入控件输入时，触发FormControl的valueChanges，valueChanges监听输入值的变化情况，同时更新FormControl下绑定的全部控件的显示的值，实现控件联动。
FormControl为Angular表单的三大基本构造块之一。跟踪独立表单控件的值和验证状态。
valueChanges为FormControl下的可观察对象，每当控件的值发生变化时，它就会发出一个事件。
在Angular响应式表单组件中，在组件OnInit的钩子接口中，初始化表单后，监听想要实现多个控件联动的FormControl。由于FormControl有valueChanges可观者对象，订阅valueChanges，就实现了对FromControl的监听。
将用户输入的值通过FormControl的setValue()的方法，并且将emitEvent设为false作为setValue()方法的中opt参数的属性，就能将FromControl绑定的全部控件都同步显示用户刚刚输入的值了。
作为优选，该Angular响应式表单控件联动的实现方法具体包括以下步骤：
S1、将多个输入控件绑定到同一个FormControl下，输入值显示在控件上；
S2、用户在界面通过绑定的多个输入控件输入；
S3、触发FormControl的valueChanges；
S4、valueChanges监听输入值是否有变化，若无变化则触发valueChanges继续监听输入值，若有变化，则更新FormControl下绑定的全部控件的显示的值，并且不触发valueChanges。
作为优选，步骤S1中，输入控件的数量根据需要设定。
作为优选，在Angular表单组件的模板上，通过FormControlName将多个输入控件绑定到同一个FormControl下。
FormControlName根据名字将现有FormGroup中的FormControl与一个表单控件进行同。
作为优选，步骤S4中，监听到输入值变化时，更新全部输入控件的值，并阻止由于输入控件值的变化再次触发valueChanges事件。
该Angular响应式表单控件联动的实现方法通过Angular响应式表单控件联动的实现系统，包括绑定模块、输入模块、触发模块和监听模块。绑定模块用于将多个输入控件绑定到同一个FormControl下，输入值显示在控件上。输入模块用于用户在界面通过绑定的多个输入控件输入。触发模块用于触发FormControl的valueChanges。监听模块用于valueChanges监听输入值是否有变化，若无变化则触发valueChanges继续监听输入值，若有变化，则更新FormControl下绑定的全部控件的显示的值，并且不触发valueChanges。
一种Angular响应式表单控件联动的实现系统，该系统包括绑定模块、输入模块、触发模块和监听模块：
绑定模块用于将多个输入控件绑定到同一个FormControl下，输入值显示在控件上；
输入模块用于用户在界面通过绑定的多个输入控件输入；
触发模块用于触发FormControl的valueChanges；
监听模块用于valueChanges监听输入值是否有变化，若无变化则触发valueChanges继续监听输入值，若有变化，则更新FormControl下绑定的全部控件的显示的值，并且不触发valueChanges。
作为优选，绑定模块中，在Angular表单组件的模板上，通过FormControlName将多个输入控件绑定到同一个FormControl下，其中输入控件的数量根据需要设定。
作为优选，监听模块在监听到输入值变化时，更新全部输入控件的值，并阻止由于输入控件值的变化再次触发valueChanges事件。
与现有技术相比，本发明的Angular响应式表单控件联动的实现方法具有以下突出的有益效果：
(一)通过该Angular响应式表单控件联动的实现方法解决了Angualarv7以及以上版本响应式表单中不能使用ngModal的问题；
(二)提高了angular低版本代码对高版本的兼容性；
(三)该Angular响应式表单控件联动的实现方法代码简洁，在angular响应式表单中替换ngModel的时候，能有效的减少工作量，具有良好的推广应用价值。
附图说明
图1是本发明所述Angular响应式表单控件联动的实现方法的流程图。
具体实施方式
下面将结合附图和实施例，对本发明的Angular响应式表单控件联动的实现方法及系统作进一步详细说明。
实施例
本发明的Angular响应式表单控件联动的实现方法，该方法将多个输入控件绑定到同一个FormControl下，用户在界面通过绑定的输入控件输入时，触发FormControl的valueChanges，valueChanges监听输入值的变化情况，同时更新FormControl下绑定的全部控件的显示的值，实现控件联动。
在Angular响应式表单组件中，在组件OnInit的钩子接口中，初始化表单后，监听想要实现多个控件联动的FormControl。由于FormControl有valueChanges可观者对象，订阅valueChanges，就实现了对FromControl的监听。
将用户输入的值通过FormControl的setValue()的方法，并且将emitEvent设为false作为setValue()方法的中opt参数的属性，就能将FromControl绑定的全部控件都同步显示用户刚刚输入的值了。
如图1所示，该Angular响应式表单控件联动的实现方法具体包括以下步骤：
S1、将多个输入控件绑定到同一个FormControl下，输入值显示在控件上。
该步骤中，在Angular表单组件的模板上，通过FormControlName将多个输入控件绑定到同一个FormControl下。其中，输入控件的数量根据需要设定。
S2、用户在界面通过绑定的多个输入控件输入。
S3、触发FormControl的valueChanges。
S4、valueChanges监听输入值是否有变化，若无变化则触发valueChanges继续监听输入值，若有变化，则更新FormControl下绑定的全部控件的显示的值，并且不触发valueChanges。
监听到输入值变化时，更新全部输入控件的值，并阻止由于输入控件值的变化再次触发valueChanges事件。
该Angular响应式表单控件联动的实现方法通过Angular响应式表单控件联动的实现系统，包括绑定模块、输入模块、触发模块和监听模块。绑定模块用于将多个输入控件绑定到同一个FormControl下，输入值显示在控件上。输入模块用于用户在界面通过绑定的多个输入控件输入。触发模块用于触发FormControl的valueChanges。监听模块用于valueChanges监听输入值是否有变化，若无变化则触发valueChanges继续监听输入值，若有变化，则更新FormControl下绑定的全部控件的显示的值，并且不触发valueChanges。
本发明的Angular响应式表单控件联动的实现系统，该系统包括绑定模块、输入模块、触发模块和监听模块。
绑定模块用于将多个输入控件绑定到同一个FormControl下，输入值显示在控件上。
绑定模块中，在Angular表单组件的模板上，通过FormControlName将多个输入控件绑定到同一个FormControl下，其中输入控件的数量根据需要设定。
输入模块用于用户在界面通过绑定的多个输入控件输入。
触发模块用于触发FormControl的valueChanges。
监听模块用于valueChanges监听输入值是否有变化，若无变化则触发valueChanges继续监听输入值，若有变化，则更新FormControl下绑定的全部控件的显示的值，并且不触发valueChanges。
监听模块在监听到输入值变化时，更新全部输入控件的值，并阻止由于输入控件值的变化再次触发valueChanges事件。
以上所述的实施例，只是本发明较优选的具体实施方式，本领域的技术人员在本发明技术方案范围内进行的通常变化和替换都应包含在本发明的保护范围内。

Claims (8)

1.一种Angular响应式表单控件联动的实现方法，其特征在于：该方法将多个输入控件绑定到同一个FormControl下，用户在界面通过绑定的输入控件输入时，触发FormControl的valueChanges，valueChanges监听输入值的变化情况，同时更新FormControl下绑定的全部控件的显示的值，实现控件联动。
2.根据权利要求1所述的Angular响应式表单控件联动的实现方法，其特征在于：该方法具体包括以下步骤：
S1、将多个输入控件绑定到同一个FormControl下，输入值显示在控件上；
S2、用户在界面通过绑定的多个输入控件输入；
S3、触发FormControl的valueChanges；
S4、valueChanges监听输入值是否有变化，若无变化则触发valueChanges继续监听输入值，若有变化，则更新FormControl下绑定的全部控件的显示的值，并且不触发valueChanges。
3.根据权利要求2所述的Angular响应式表单控件联动的实现方法，其特征在于：步骤S1中，输入控件的数量根据需要设定。
4.根据权利要求或3所述的Angular响应式表单控件联动的实现方法，其特征在于：在Angular表单组件的模板上，通过FormControlName将多个输入控件绑定到同一个FormControl下。
5.根据权利要求4所述的Angular响应式表单控件联动的实现方法，其特征在于：步骤S4中，监听到输入值变化时，更新全部输入控件的值，并阻止由于输入控件值的变化再次触发valueChanges事件。
6.一种Angular响应式表单控件联动的实现系统，其特征在于：该系统包括绑定模块、输入模块、触发模块和监听模块：
绑定模块用于将多个输入控件绑定到同一个FormControl下，输入值显示在控件上；
输入模块用于用户在界面通过绑定的多个输入控件输入；
触发模块用于触发FormControl的valueChanges；
监听模块用于valueChanges监听输入值是否有变化，若无变化则触发valueChanges继续监听输入值，若有变化，则更新FormControl下绑定的全部控件的显示的值，并且不触发valueChanges。
7.根据权利要求6所述的Angular响应式表单控件联动的实现系统，其特征在于：绑定模块中，在Angular表单组件的模板上，通过FormControlName将多个输入控件绑定到同一个FormControl下，其中输入控件的数量根据需要设定。
8.根据权利要求7所述的Angular响应式表单控件联动的实现系统，其特征在于：监听模块在监听到输入值变化时，更新全部输入控件的值，并阻止由于输入控件值的变化再次触发valueChanges事件。
CN201911053238.XA 2019-10-31 2019-10-31 一种Angular响应式表单控件联动的实现方法及系统 Pending CN110764866A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911053238.XA CN110764866A (zh) 2019-10-31 2019-10-31 一种Angular响应式表单控件联动的实现方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911053238.XA CN110764866A (zh) 2019-10-31 2019-10-31 一种Angular响应式表单控件联动的实现方法及系统

Publications (1)

Publication Number Publication Date
CN110764866A true CN110764866A (zh) 2020-02-07

Family

ID=69335268

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911053238.XA Pending CN110764866A (zh) 2019-10-31 2019-10-31 一种Angular响应式表单控件联动的实现方法及系统

Country Status (1)

Country Link
CN (1) CN110764866A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112733511A (zh) * 2020-12-31 2021-04-30 深圳奥哲网络科技有限公司 表单处理方法、系统、电子设备及计算机可读存储介质
CN112905682A (zh) * 2021-02-09 2021-06-04 上海易校信息科技有限公司 一种数据联动交互的方法
CN114185528A (zh) * 2021-12-20 2022-03-15 四川启睿克科技有限公司 一种自定义表单控件间配置执行的方法

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102135884A (zh) * 2011-03-18 2011-07-27 北京星网锐捷网络技术有限公司 控件联动方法、装置及系统
CN106802804A (zh) * 2017-01-12 2017-06-06 合肥杰美电子科技有限公司 一种人机界面的可视化变量关联组件的方法及系统
CN109446045A (zh) * 2018-10-24 2019-03-08 无锡天脉聚源传媒科技有限公司 一种输入框的监听方法、系统及存储介质

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102135884A (zh) * 2011-03-18 2011-07-27 北京星网锐捷网络技术有限公司 控件联动方法、装置及系统
CN106802804A (zh) * 2017-01-12 2017-06-06 合肥杰美电子科技有限公司 一种人机界面的可视化变量关联组件的方法及系统
CN109446045A (zh) * 2018-10-24 2019-03-08 无锡天脉聚源传媒科技有限公司 一种输入框的监听方法、系统及存储介质

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112733511A (zh) * 2020-12-31 2021-04-30 深圳奥哲网络科技有限公司 表单处理方法、系统、电子设备及计算机可读存储介质
CN112905682A (zh) * 2021-02-09 2021-06-04 上海易校信息科技有限公司 一种数据联动交互的方法
CN114185528A (zh) * 2021-12-20 2022-03-15 四川启睿克科技有限公司 一种自定义表单控件间配置执行的方法
CN114185528B (zh) * 2021-12-20 2024-04-12 四川启睿克科技有限公司 一种自定义表单控件间配置执行的方法

Similar Documents

Publication Publication Date Title
CN110764866A (zh) 一种Angular响应式表单控件联动的实现方法及系统
JP5361743B2 (ja) コンピュータシステムイベントインタフェース
US8984437B2 (en) Controlling display of a plurality of windows
CN103294172A (zh) 在远程桌面会话中提供多个鼠标输入的方法
ATE424688T1 (de) System, verfahren und mobile vorrichtung zum management von drahtlosen verbindungen
CN110858158B (zh) 分布式任务调度方法、装置、电子设备、存储介质
US20110321034A1 (en) Method for Improving the Performance of Computers
CN103699405B (zh) 智能终端快捷升级应用程序的方法及装置
CN104331262A (zh) 基于QT embedded的同步显示方法、系统及数控机床
TW201506563A (zh) 可編程顯示器、可編程控制器系統、程式
US20080010315A1 (en) Platform management of high-availability computer systems
US20180365789A1 (en) Device management apparatus, device management method, and non-transitory computer readable storage medium
US20130326638A1 (en) Sicherheitssystem
CN103984486A (zh) 应用程序功能添加方法及系统
CN103064698A (zh) 自动安装软件的方法和装置
CN110968316A (zh) 一种基于浏览器的组态编辑器及编辑方法
JP2008015975A (ja) アプリケーション設定情報更新方法
US9542250B2 (en) Distributed maintenance mode control
CN110879871B (zh) 页面菜单的配置方法及装置
JP7209033B2 (ja) オンラインプログラム更新のためのスケジューリングシステムおよび方法
CN101714079B (zh) 计算机系统转移关于通知区的通知图标的方法及装置
CN104199629A (zh) 多界面联动系统及其通过网络连接实现多界面联动的方法
JP4492530B2 (ja) 計算機制御方法および管理計算機並びにその処理プログラム
CN114020376A (zh) 一种处理方法及设备
JP6051545B2 (ja) Ｐｌｃシステム、状態表示方法、ｐｌｃ、およびプログラマブル表示器

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination