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)
I came across the same problem today.
I quickly made a custom directive to force
[FormControl]
and[FormControlName]
to update when theFormControl
updates.https://gist.github.com/Dyljyn/59e95fbe09a24b1835667a1a5e401e5a
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?
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.
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…
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#L151Can this issue be reconsidered?
I’m using the following workaround: https://stackblitz.com/edit/angular-g41f7e
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).
I had the same use case and solved thanks @Dyljyn’s directive. It would be nice if this was supported out of the box.
@kara As of now, in Angular 8,
ngModel
can’t be used to register form controls with a parentformGroup
directive. So the workaround seems to be invalid. Please re-open the issue.