angular / angular/angular

FormControls are not usable in multiple formGroups

Open
#50,957 3 comments 3 reactions 0 assignees View on GitHub
area: forms forms: Controls API
Dominant language
TypeScript
Stars
101k
Forks
27.5k
Avg merge
1d 19h
Merged PRs (30d)
288

Description

### Which @angular/* package(s) are the source of the bug?

forms

### Is this a regression?

Yes

### Description

Right now using the same formControls in multiple formGroups is not possible. From the developer's point of view, I think it would be more intuitive in this case that the controls were synchronized. It seems that it only changes the value in the last formGroup that the controls are assigned to.

Example:

```
userControl = new FormControl('');
passControl = new FormControl('');

form1 = new FormGroup({
user1: this.userControl,
pass1: this.userControl
});

form2 = new FormGroup({
user2: this.userControl,
pass2: this.userControl
});

constructor(){
this.form1.valueChanges.subscribe((res) => {
// Never enter here:
console. log('FORM1 Changes');
});

this.form2.valueChanges.subscribe((res) => {
console. log('FORM2 Changes');
});
}

```

In the HTML:

```




```

### Please provide a link to a minimal reproduction of the bug

_No response_

### Please provide the exception or error you saw

_No response_

### Please provide the environment you discovered this bug in (run `ng version`)

```true
Angular CLI: 15.2.8
Node: 16.15.1
Package Manager: npm 8.14.0
OS: win32 x64

Angular: 15.2.9
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1502.8
@angular-devkit/build-angular 15.2.8
@angular-devkit/core 15.2.8
@angular-devkit/schematics 15.2.8
@angular/cli 15.2.8
@schematics/angular 15.2.8
rxjs 7.5.7
typescript 4.8.4
```

### Anything else?

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the shown example with @angular/forms FormControl and FormGroup, then inspect how formGroup, formControlName, and valueChanges interact when one control is registered in multiple groups. Done means the intended behavior for shared controls is defined and covered by a regression test, with form1 and form2 valueChanges behaving accordingly.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.