Repository: angular
Issue: Reactive forms. formArrayName with formGroupName
Labels: type: bug/fix,freq1: low,area: forms,P3

<!--
PLEASE HELP US PROCESS GITHUB ISSUES FASTER BY PROVIDING THE FOLLOWING INFORMATION.

ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.
-->

## I'm submitting a...
<!-- Check one of the following options with "x" -->
<pre><code>
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[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
</code></pre>

## Current behavior
<!-- Describe how the issue manifests. -->
```
...
<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
<!-- Describe what the desired behavior would be. -->
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
<!--
For bug reports please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
https://stackblitz.com or similar (you can use this template as a starting point: https://stackblitz.com/fork/angular-gitter).
-->

## What is the motivation / use case for changing the behavior?
<!-- Describe the motivation or the concrete use case. -->


## Environment

<pre><code>
Angular version: 5.2.5
<!-- Check whether this is still an issue in the most recent Angular version -->

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  <!-- run `node --version` -->
- Platform:  <!-- Mac, Linux, Windows -->

Others:
<!-- Anything else relevant?  Operating system version, IDE, package manager, HTTP server, ... -->
</code></pre>