Is there an example of radio button usage?
I have a component dialog that needs to show a couple of radio buttons, then use whichever button is chosen to make visible more UI control to gather data, ultimately storing an id value and returning it as output from the dialog.
The name property of the radio group (per angular materials site) is supposed to hold the selected button name, but can’t seem to get the radio group button name to resolve…and there’s no code under the library that I can see (only properties), so can’t dig into that…
You can use two different way to bind data to a radio button group: ngModel or formControl.
Use ngModel if you want to bind to a UI property like “mode” (be sure to specify ngModel is linked to (two way binding) mode.
Use formControl if you are trying to update a formControl property. An example would be a business object with a type property. Setting formControl is evalulated from (one way binding) myObject.typeFormControl should do it.
Remember to set both inner text and value on the radio buttons you put inside the grouop.
In my case, I’m not linking to a formControl, just wanting some options for the user to choose in order to show other ui controls.
If you define ngModel as an attribute, giving it a name as shown in the picture below, does that mean that the ‘name’ attribute is not used?
And, when I chose a radio button, and execute the dialog and click the button, which then runs a method on the dialog (debugging the value), but I get undefined.
debug(‘this.optionChosen’, this.optionChosen);
Shouldn’t it have a value?
Try removing the name attribute and making the ngModel “is linked to”.
that did it, thanks.
and note that the value passed through the ngModel is the ‘value’ attribute of the button (not the name)
follow up question, can’t seem to figure out how to set a default radio button, have tried several things, like setting the ‘value’ attribute of the group to the button you want as a default, etc. with no luck. Am I missing something? There has to be a way to do this…
