angular / angular/angular

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

Aperta
#19,491 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub
area: forms forms: template-driven freq1: low P4 state: confirmed type: bug/fix
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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.