Reactive forms. formArrayName with formGroupName

[Yerkon]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

...
<div *ngSwitchCase="type.Party"
                           [@enterAnimation]
                           (close)="closeRightPart()"
                           formArrayName="parties">
      <div class="col full"
           [formGroupName]="contract.parties.indexOf(selectedParty)">
            <div>
              <div>Some title</div>
              <input type="number"
                     class="full"
                     formControlName="shipmentVolume" /> // shipmentVolume doesn't update
            </div>
             ...
...

parties: FormArray(SomeObject[])
In this code example, I don't iterate over parties. As a content only show some view with form control at specified index. This index of formGroupName changes dynamically and in this cases formControlName value doesn't update. First rendered formControlName value only shown.

Expected behavior

When formGroupName changes need to update formControlName values too.
In my code example selectedParty change, which will trigger to update [formGroupName]

Temporary solution:

Remove this view from template and insert it again with using setTimeout():

 openRightPart(type: Type, selectedParty: Party = null) {
    if (type === Type.Party && selectedParty) {
      setTimeout(() => {
        this.closeRightPart();
      });

      setTimeout(() => {
        this.selectedParty = selectedParty;
        const selectedPart = this.rightParts.find(rp => rp.type === type);
        this.openedPart = selectedPart;
      });


    } else {
      ...
    }
  }

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: 5.2.5


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[houfu]

Not sure why this is labelled a feature. I thought that with a change in a parent formGroupName, it is expected that child formControlName is also updated. This should be a bug.

The workaround I have developed is to use *ngFor and remove unnecessary items using *ngIf. However this is not intuitive.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[JoostK]

Minimal repro: https://stackblitz.com/edit/angular-ivy-yzesdz?file=src%2Fapp%2Fapp.component.ts