Skip to content
This repository has been archived by the owner on Sep 16, 2022. It is now read-only.

radio input: support for ngModel and value #293

Closed
chalin opened this issue Mar 6, 2017 · 6 comments
Closed

radio input: support for ngModel and value #293

chalin opened this issue Mar 6, 2017 · 6 comments

Comments

@chalin
Copy link
Collaborator

chalin commented Mar 6, 2017

Add support for ngModel and value radio input properties, matching the functionality available under AngularDart Material's <material-radio-group>.

@chalin
Copy link
Collaborator Author

chalin commented Mar 15, 2017

@matanlurey matanlurey added this to the V3 Beta milestone Mar 16, 2017
@ferhatb ferhatb modified the milestones: Post-V3, V3 Beta Mar 24, 2017
@matanlurey matanlurey self-assigned this May 15, 2017
@matanlurey
Copy link
Contributor

We already support this:

<input type="radio" name="food" [(ngModel)]="foodChicken">

What else is needed exactly @chalin?

@chalin
Copy link
Collaborator Author

chalin commented May 16, 2017

While there is ng2 support for ngModel over radio inputs, the current support isn't practical.

Let me illustrate this using the the example from lib/src/common/forms/directives/radio_control_value_accessor.dart:

@Component(
  template: '''
    <input type="radio" name="food" [(ngModel)]="foodChicken">
    <input type="radio" name="food" [(ngModel)]="foodFish">
  '''
)
class FoodCmp {
  RadioButtonState foodChicken = new RadioButtonState(true, "chicken");
  RadioButtonState foodFish = new RadioButtonState(false, "fish");
}

Notice that developers are forced to have a model variable of type RadioButtonState for each radio button and that only String values can be associated with radio buttons.

In ACX and ngTS, any type can be associated with radio button values, and only one ngModel is necessary. Here is an ngTS example of a list of radio buttons for selecting heroes:

  <label *ngFor="let h of heroes">
    <input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h">{{h.name}}
  </label>

The ngModel is bound to the currentHero; this is much easier to deal with than a collection of RadioButtonState fields.

Here is the same example in ACX, slightly adapted from webdev examples/ng/doc/template-syntax/lib/app_component.html:

<material-radio-group [(ngModel)]="currentHero">
  <material-radio *ngFor="let h of heroes" [value]="h">
    {{h.name}} ({{h.id}})
  </material-radio>
</material-radio-group>

cc @kwalrath @nshahan

@matanlurey
Copy link
Contributor

Pushed to 5x.

@matanlurey
Copy link
Contributor

I'm going to remove this from the 5x milestone since (a) I don't see many users hitting this and (b) we'd like to really get close to 5x as soon as possible. This could always be done in 5.1+.

@matanlurey matanlurey modified the milestones: =5.0.0, >5.0.0 Mar 9, 2018
@matanlurey
Copy link
Contributor

We don't plan on working on this in the short/medium term.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants