angular: Bug(forms): Two formControlName bound to same FormControl are not updated without ngModel

I’m submitting a … (check one with “x”)

[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior Consider this template:

<form [formGroup]="form">
    <input type="text" formControlName="control"/>
    <input type="text" formControlName="control"/>
    ...

I have 2 inputs bound to the same FormControl. I’m not using ngModel input of formControlName directive.

When I enter something in one control, another control is not updated and debugging shows that viewModel property of the second FormControlName is never updated.

I suppose this happens because viewModel is updated only when ngModel is changed https://github.com/angular/angular/blob/master/modules/%40angular/forms/src/directives/reactive_directives/form_control_directive.ts#L98 and not when control.valueChanges fires.

Expected/desired behavior Expected both inputs to always have the same value.

Reproduction of the problem http://plnkr.co/edit/g7P37ipoQXc9Pe0hDgOy

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 18
Comments: 15 (3 by maintainers)

Most upvoted comments

I came across the same problem today.

I quickly made a custom directive to force [FormControl] and [FormControlName] to update when the FormControl updates.

https://gist.github.com/Dyljyn/59e95fbe09a24b1835667a1a5e401e5a

+20

Dyljyn on Jun 7, 2018

I just found this searching for the same problem. We have three different controls that use reactive forms but need to share the same value. We can’t use template based controls. Is there any other workaround?

+10

greenGoby on Oct 5, 2017

Shared form controls are only supported right now for naturally grouped controls like radio buttons (which have a shared registry). For text inputs sharing controls, ngModel is the only option if you’d like them to be synced. We’re not likely to add this functionality to reactive forms given the workaround, so closing. If you feel there is a use case for this that cannot be solved any other way, please feel free to open an issue with some more info about your use case.

kara on Oct 17, 2016

so, in 2016 this was closed as there are workaround (which are deprecated now) and if there were use cases that cannot be handled otherwise, a new ticket should be opened… yet, every new ticket is marked as a duplicate and closed without discussion? this feels strange and wrong to me! most work arounds right now require changes in the component thus breaking the template-agnostic concept of reactive forms imho…

norganos on Jun 24, 2019

Hi @kara, the workaround of using [ngModel] appears to be deprecated as of v6: https://github.com/angular/angular/blob/1a44a0b4a87767236f6eea07deca5e4d8789572f/packages/forms/src/directives/reactive_directives/form_control_directive.ts#L151

Can this issue be reconsidered?

ppham27 on Apr 26, 2018

I’m using the following workaround: https://stackblitz.com/edit/angular-g41f7e

dpsthree on Apr 6, 2018

I have a use case for this: A Select list with an input box for override. Select list has ‘High, Medium, Low’ which translate to 3, 2, 1 and input box shows those values (3, 2, 1) but also allows user to enter an override value. (like 4).

GenuineRex on Oct 6, 2018

I had the same use case and solved thanks @Dyljyn’s directive. It would be nice if this was supported out of the box.

FrancescoBorzi on Sep 10, 2018

@kara As of now, in Angular 8, ngModel can’t be used to register form controls with a parent formGroup directive. So the workaround seems to be invalid. Please re-open the issue.

jinsts on Aug 14, 2019