Radio Buttons and Drop Down

[pauljlucas]

Hey Mseemann,

I will be testing out the new features tonight for the validity checking but i had one other thing i ran into:

When using radio buttons with a reactive group the radio button view never updates. What i mean is that when you select a radio button, the selection in the group is updated, but ALL of the radio buttons selected stay colored.

      <mdl-radio name="group1" formControlName="value" [formGroup]="formGroup1" value="1" mdl-ripple>1</mdl-radio>
      <mdl-radio name="group1" formControlName="value" [formGroup]="formGroup1" value="2" mdl-ripple>2</mdl-radio>
      <mdl-radio name="group1" formControlName="value" [formGroup]="formGroup1" value="3" mdl-ripple>3</mdl-radio>
      <mdl-radio name="group1" formControlName="value" [formGroup]="formGroup1" value="4" mdl-ripple>4</mdl-radio>
      <mdl-radio name="group1" formControlName="value" [formGroup]="formGroup1" value="5" mdl-ripple>5</mdl-radio>

This is similar to the code i was using. Also i was on chrome and have not tested on other browsers yet. Any tips or does this look like a bug? (Maybe not redrawing the elements or something?)

[mseemann]

Hi, I'll take a look :)

[mseemann]

This was really a big problem. I needed to refactor the complete radio button handling. If i release it (tomorrow) your code will be:

<mdl-radio name="group1" formControlName="group1" value="1" >1</mdl-radio>
<mdl-radio name="group1" formControlName="group1" value="2" >1</mdl-radio>
<mdl-radio name="group1" formControlName="group1" value="3" >1</mdl-radio>

public group1 = new FormControl('1');

    this.form = this.fb.group({
      'group1': this.group1
    });

The name attribute can be omitted it is automatically derived form the formControlName.

This example (http://mseemann.io/angular2-mdl/reactiveForms) will be update soon to show how to use the mdl-radio component with reactive forms.

[pauljlucas]

@mseemann How will this work if i want to have 2 different sets of distinct radio buttons? Im assuming then you would not be able to omit name and then name would separate the 2?

I saw you had to add in all of the toggled and untoggled logic, that looked like a pain!

Also, i think i forgot to mention this on the first comment but is there logic for a drop down list (a normal use case is for a list of countries)?

[mseemann]

hi, yes the name is used to separate the 2 radio groups. But the name will be taken from the formControlName and they must be different if you have more than one group. I have extended the example (http://mseemann.io/angular2-mdl/reactiveForms) with two radio groups. In these example you can remove the name safely.

drop down list: unfortunately there is no drop down list in material design lite (v1.2). That's why i don't want to add one because it would break the usage of the original css. May be this project is a starting point for you (https://github.com/Garbee/Dropdown-Component) to create your own one.

-> all updates in npm v 1.4.6