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…
still could use a pointer on this…trying to set a particular radio button up front in a dialog…
- Setting ‘selected’ attribute as is-eval ‘Device’ (the name of a button) on the radio button doesn’t appear to work
- Setting a default value (‘Device’) to a variable, and setting selected attribute doesn’t work
- Setting the #2 variable above in initialize doesn’t work
Is there another way that I’m not seeing? What’s the ‘right’ way of doing this?
5.
The simplest way to deal with Radio Button binding is to add ngModel is linked to myChoice on the Radio Button Group. Then each Radio Button should have a value property (‘Device’ for example) and inner text that will be displayed.
am not seeing anything in the materials docs about setting a default…
the attribute I have connected to the radioGroup (ngModel) shows that the first button ‘Device’ is selected, but the graphic isn’t filled/showing on the actual UI…
and when I try to subscribe to changes like the below, it doesn’t seem to drive this subscription when I click different radio buttons
this.subscriptions.push(
this.selectedRadio.valueChanges.subscribe((value) => {
debug('subscription on selectedRadio value', value);
this.resetFile();
})
);
and actually, the variable tied to ngModel si not changing when different radio buttons are clicked…oy
There are two ways to bind data to a control in Angular. “ngModel” is binding to a specific native value. “formControl” is used to bind to a value that is stored in a form control. Looks like you need to switch to formControl and both problems should be solved.
yeah, so I have ngModel set on the radio group is-linked-to a variable that’s defined as a form control.
And I put a button on the dialog to check the value of this variable, and it is not changing when I click on different radio buttons.
for the reader, it’s an ngModel OR formcontrol choice to make as Dave said.
So I now have an attributed ‘formControl’ is-evaluated-from selectedRadio (which is itself defined as a string and a formControl, and the subscription works fine.
I had left the ngModel in there, and didn’t have the formControl attribute defined, so the subscription could not function.
