(Template-driven forms) FormControl for multiple radio buttons in a group is being removed from the Form
- Lingua principale
- TypeScript
- Stelle
- 101k
- Fork
- 27.5k
- Merge medio
- 1g 19h
- PR unite (30g)
- 288
Descrizione
## 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:
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia con il Plunker collegato e riproduci il comportamento usando Angular 4.4.4, template-driven forms, ngModel, ngFor e radio buttons raggruppati. Traccia il modo in cui i radio controls si registrano e si deregistrano dal form quando uno viene rimosso. Il lavoro è completato quando il FormControl e il suo required validator rimangono presenti finché esiste un radio button nel gruppo, e vengono rimossi solo dopo che il gruppo è vuoto.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Specificata chiaramente
- Idoneità per principianti
- 35/100