[发明专利]一种Angular响应式表单控件联动的实现方法及系统

说明书

本发明公开了一种Angular响应式表单控件联动的实现方法及系统，属于前端Angular技术框架技术领域。本发明的Angular响应式表单控件联动的实现方法，该方法将多个输入控件绑定到同一个FormControl下，用户在界面通过绑定的输入控件输入时，触发FormControl的valueChanges，valueChanges监听输入值的变化情况，同时更新FormControl下绑定的全部控件的显示的值。该发明的Angular响应式表单控件联动的实现方法提高了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。