Repository: angular
Issue: (Template-driven forms) FormControl for multiple radio buttons in a group is being removed from the Form
Labels: type: bug/fix,freq1: low,area: forms,state: confirmed,forms: template-driven,P4

<!--
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 -->
[ ] 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. -->
Using template-driven forms, I have the following scenario:

- Inside a `<form>`, 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
<!-- Describe what the desired behavior would be. -->
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
<!--
For bug reports please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
-->
**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?
<!-- Describe the motivation or the concrete use case. -->
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

<pre><code>
Angular version: 4.4.4
<!-- Check whether this is still an issue in the most recent Angular version -->

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  <!-- run `node --version` -->
- Platform:  <!-- Mac, Linux, Windows -->

Others:
<!-- Anything else relevant?  Operating system version, IDE, package manager, HTTP server, ... -->
</code></pre>