(Template-driven forms) FormControl for multiple radio buttons in a group is being removed from the Form

## I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)

[x] Bug report  

[ ] 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

Using template-driven forms, I have the following scenario:

- Inside a ``, I have a group of radio buttons that are all bound to a single property on the component via ngModel. The FormControl for this group of radio buttons has a `required` validator, since I want the form to be valid if and only if the user has selected one of the radio buttons.
- There are a variable number of radio buttons in the group, so each radio button's value is equal to the index read from the *ngFor in the template.
- There is a "Add Choice" button which adds another radio button to the group, and an "X" button that removes a radio button from the group. (**Note:** it is possible to remove the radio button that is currently selected, in which case I set `selectedIndex = null` to indicate that no radio button is selected.)

When I delete one of the radio buttons from the UI, the FormControl is being removed from the Form (despite the fact that there are still other radio buttons in the same group that are bound to that FormControl). The form is now "valid" because the required validator (which was attached to the FormControl) is no longer part of the form.

## Expected behavior

The FormControl should not be removed from the Form when there are still other radio buttons in the same group bound to that FormControl. I would only expect the FormControl to be removed from the Form when all radio buttons in the group are removed from the UI.

## Minimal reproduction of the problem with instructions

**Minimal demo**: http://plnkr.co/edit/76tRuG1hUhKzQCpMuBcz?p=preview

**Steps to reproduce**:

1. Load the plunker
2. Observe that the form is currently invalid because no radio button is selected.
3. Click one of the "X" buttons to delete a radio button from the UI.
4. Bug: the form is now valid (despite the fact that no radio button is selected).

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

Using template-driven forms, I want to be able to use Angular validators with a form that contains a variable number of radio buttons. (In the minimal repro above, I'm aware I can work around the issue by writing my own custom validator that checks `selectedIndex === null`, or by using reactive forms instead. But I'm still reporting this as a bug for template-driven forms because I don't agree with the behavior where the FormControl is being removed from the Form when there are still other radio buttons in the UI that are bound to it.)

## Environment

Angular version: 4.4.4


Browser:

- [x] Chrome (desktop) version 61.0.3163.100 (Official Build) (64-bit)

- [ ] 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:

Start with the linked Plunker and reproduce the behavior using Angular 4.4.4 template-driven forms, ngModel, ngFor, and grouped radio buttons. Trace how radio controls register and unregister with the form when one is removed. Done means the FormControl and its required validator remain while any radio button in the group exists, and are removed only after the group is empty.

Written by the indexing model from the issue text.