Angular2 - Radio Button Binding

Question

I want to use radio button in a form using Angular 2   Options    lt br  gt   1    lt input name  options  ng-control  options  type  radio  value  1     ng-model    model options   gt  lt br  gt   2    lt input name  options  ng-control  options  type  radio  value  2    ng-model    model options   gt  lt br  gt    model options initial value is 1  when the page is loaded the first radio button isn t checked and the modifications aren t binded to the model   Any Idea

User · Answer

Note - radio button binding is now a supported feature in RC4 onwards - see this answer  Radio button example using custom RadioControlValueAccessor similar to CheckboxControlValueAccessor  Updated with Angular 2 rc-1   App ts  import  Component  from   angular core   import  FORM DIRECTIVES  from   angular common   import  RadioControlValueAccessor  from    radio value accessor   import  bootstrap  from   angular platform-browser-dynamic     Component       selector   my-app       templateUrl   template html       directives   FORM DIRECTIVES  RadioControlValueAccessor     export class App        model       constructor             this model                 sex   female                       template html   lt div gt       lt form action    gt           lt input type  radio    ngModel    model sex   name  sex  value  male  gt Male lt br gt           lt input type  radio    ngModel    model sex   name  sex  value  female  gt Female      lt  form gt        lt input type  button  value  select male   click   model sex  male   gt       lt input type  button  value  select female   click   model sex  female   gt       lt div gt Selected Radio    model sex   lt  div gt   lt  div gt    radio value accessor ts  import  Directive  Renderer  ElementRef  forwardRef  from   angular core   import  NG VALUE ACCESSOR  ControlValueAccessor  from   angular common    export const RADIO VALUE ACCESSOR  any         provide  NG VALUE ACCESSOR      useExisting  forwardRef      gt  RadioControlValueAccessor       multi  true      Directive      selector          input type radio  ngControl  input type radio  ngFormControl  input type radio  ngModel       host     change     onChange  event target value      blur     onTouched         bindings   RADIO VALUE ACCESSOR     export class RadioControlValueAccessor implements ControlValueAccessor      onChange         gt         onTouched        gt          constructor private  renderer  Renderer  private  elementRef  ElementRef         writeValue value  any   void          this  renderer setElementProperty this  elementRef nativeElement   checked   value    this  elementRef nativeElement value           registerOnChange fn      any    gt       void   this onChange   fn       registerOnTouched fn       gt       void   this onTouched   fn        Source   https   github com angular2-school angular2-radio-button  Plunker live demo     http   plnkr co edit aggee6An1iHfwsqGoE3q p preview

User · Answer

This may be not the correct solution but this one is also option hope it will help someone   Till now i had getting the value of radioButtons using  click  method like following    lt input type  radio  name  options   male  click   onChange male value   gt Male  lt input type  radio  name  options   female  click   onChange female value   gt Female   and in the  ts file i have set the value of predefined variable to getter value of onChange function    But after searching i found good method i have t tried yet but it seems this one is good using   ng-model   link is here to github here  this is using RadioControlValueAccessor for the radio as well as checkbox too  here is the working  plnkr  for this method here

User · Answer

This Issue is solved in version Angular 2 0 0-rc 4  respectively in forms   Include   angular forms    0 2 0  in package json   Then extend your bootstrap in main  Relevant part       import   AppComponent   from    app app component   import   disableDeprecatedForms  provideForms   from   angular forms    bootstrap AppComponent        disableDeprecatedForms        provideForms        appRouterProviders       I have this in  html and works perfectly  value    buildTool     lt form action    gt       lt input type  radio    ngModel    buildTool  name  buildTool  value  gradle  gt Gradle  lt br gt       lt input type  radio    ngModel    buildTool  name  buildTool  value  maven  gt Maven  lt  form gt

User · Answer

On Radio button change get the value of the respective buttons with these lines   lt label class  radio-inline  gt   lt input class  form-check-input  type  radio    ngModel    dog  name  cat   checked  change   onItemChange  event   value  Dog    gt Dog lt  label gt   lt label class  radio-inline  gt   lt input class  form-check-input  type  radio    ngModel    cat  name  cat     change   onItemChange  event   value  Cat     gt Cat lt  label gt    https   stackblitz com edit angular-jpo2dm embed 1 amp file src app app component html

User · Answer

I was looking for the right method to handle those radio buttons here is an example for a solution I found here    lt tr  ngFor  let entry of entries  gt       lt td gt    entry description    lt  td gt       lt td gt           lt input type  radio  name  radiogroup                value   entry id                change   onSelectionChange entry   gt       lt  td gt   lt  tr gt    Notice the onSelectionChange that passes the current element to the method

User · Answer

As much as this answer might not be the best depending on your use case  it works  Instead of using the Radio button for a Male and Female selection  using the  lt select gt   lt  select gt  works perfectly  both for saving and editing    lt select formControlName  gender  name  gender  class    gt     lt option value  M  gt Male lt  option gt     lt option value  F  gt Female lt  option gt   lt  select gt    The above should do just fine  for editing using FormGroup with patchValue  For creating  you could use   ngModel   instead of the formControlName  Still works   The plumbing work involved with the radio button one  I chose to go with the select instead  Visually and UX-wise  it doesn t appear to be the best  but from a developer s standpoint  it s a ton easier

User · Answer

Radio input doesn t seem to be supported yet   There should be a radio input value accessor  similar to checkbox s one  where it sets  checked  attr here  but I didn t find any  So I implemented one  you can check it out here

User · Answer

Here is some code I use that works with Angular 7      Note  In the past I sometimes used info provided by the answer of Anthony Breneli  re  which I appreciate   But  at least for Angular 7   this part     checked   model options  2    I found to be unnecessary    My solution here has three advantages    Consistent with the most commonly recommended solutions   So it is good for new projects  Also allows radio button code to be similar to Flex ActionScript code   This is personally important because I am translating Flex code to Angular    Like Flex ActionScript code it allows code to work on a radio button object to check or uncheck or find out if a radio button is checked  Unlike most solutions you will see  it is very object-based   One advantage is organization  It groups together data binding fields of a radio button  such as selected  enabled  visible  and possibly others    Example HTML           lt input type  radio  id  byAllRadioButton                   name  findByRadioButtonGroup                     ngModel    findByRadioButtonGroup dataBindingValue                    value   byAllRadioButton MY DATA BINDING VALUE  gt                   lt input type  radio  id  byNameRadioButton                   name  findByRadioButtonGroup                      ngModel    findByRadioButtonGroup dataBindingValue                    value   byNameRadioButton MY DATA BINDING VALUE  gt    Example TypeScript    findByRadioButtonGroup   UIRadioButtonGroupModel       new UIRadioButtonGroupModel  findByRadioButtonGroup                                      byAllRadioButton value                                      groupValue   any    gt  this handleCriteriaRadioButtonChange groupValue                                          byAllRadioButton   UIRadioButtonControlModel       new UIRadioButtonControlModel  byAllRadioButton        byAllRadioButton value       this findByRadioButtonGroup       byNameRadioButton   UIRadioButtonControlModel       new UIRadioButtonControlModel  byNameRadioButton        byNameRadioButton value       this findByRadioButtonGroup         private handleCriteriaRadioButtonChange    groupValue   any    void   gt         if   this byAllRadioButton selected               Do something        else if   this byNameRadioButton selected               Do something        else         throw new Error  No expected radio button selected                 Two classes are used   Radio Button Group Class   export class UIRadioButtonGroupModel       private  dataBindingValue   any      constructor private readonly debugName   string                private readonly initialDataBindingValue   any   null       Can be null or unspecified               private readonly notifyOfChangeHandler   Function   null          Can be null or unspecified            this  dataBindingValue   initialDataBindingValue          public get dataBindingValue     any        return this  dataBindingValue          public set dataBindingValue val   any         this  dataBindingValue   val      if  this notifyOfChangeHandler    null          MyAngularUtils callLater this notifyOfChangeHandler  this  dataBindingValue                  public unselectRadioButton valueOfOneRadioButton   any                   Warning  This method probably never or almost never should be needed         Setting the selected radio button to unselected probably should be avoided  since        the result will be that no radio button will be selected   That is        typically not how radio buttons work   But we allow it here         Be careful in its use              if  valueOfOneRadioButton    this  dataBindingValue          console warn  Setting radio button group value to null          this dataBindingValue   null                  Radio Button Class  export class UIRadioButtonControlModel       public enabled   boolean   true    public visible   boolean   true      constructor public readonly debugName   string                public readonly MY DATA BINDING VALUE   any                private readonly group   UIRadioButtonGroupModel                             public get selected     boolean        return  this group dataBindingValue    this MY DATA BINDING VALUE           public set selected doSelectMe   boolean         if  doSelectMe          this group dataBindingValue   this MY DATA BINDING VALUE        else         this group unselectRadioButton this MY DATA BINDING VALUE

User · Answer

Simplest solution and workaround    lt input name  toRent  type  radio   click   setToRentControl false   gt   lt input name  toRent  type  radio   click   setToRentControl true   gt   setToRentControl value       this vm toRent updateValue value       alert value     true false

User · Answer

I ve created a version by using just a click event on the elements loaded and passing the value of the selection into the function  getSelection  and updating the model   In your template    lt ul gt        lt li  ngFor  let p of price  gt  lt input type  radio  name  price        click   getValue price value   value    p     price gt    p          lt  li gt   lt  ul gt    Your class   export class App      price string     price     1000    2000    3000       constructor            model   new SomeData this price      getValue price       this model price   price          See example  https   plnkr co edit 2Muje8yvWZVL9OXqG0pW p info

User · Answer

Here is a solution that works for me   It involves radio button binding--but not binding to business data  but instead  binding to the state of the radio button   It is probably NOT the best solution for new projects  but is appropriate for my project    My project has a ton of existing code written in a different technology which I am porting to Angular   The old code follows a pattern in which the code is very interested in examining each radio button to see if it is the selected one   The solution is a variation of the click handler solutions  some of which have already been mentioned on Stack Overflow  The value added of this solution may be         Works with the pattern of old code that I have to work with    I created a helper class to try to reduce the number of  if  statements     in the click handler  and to handle any group of radio buttons       This solution involves        Using a different model for each radio button    Setting the  checked  attribute with the radio button s model    Passing the model of the clicked radio button to the helper class     The helper class makes sure the models are up-to-date    At  submit time  this allows the old code to examine the state of the      radio buttons to see which one is selected by examining the models       Example    lt input type  radio       checked   maleRadioButtonModel selected       click   radioButtonGroupList selectButton maleRadioButtonModel            lt input type  radio       checked   femaleRadioButtonModel selected       click   radioButtonGroupList selectButton femaleRadioButtonModel          When the user clicks a radio button  the selectButton method of the helper class gets invoked    It is passed the model for the radio button that got clicked  The helper class sets the boolean  selected  field of the passed in model to true  and sets the  selected  field of all the other radio button models to false   During initialization the component must construct an instance of the helper class with a list of all radio button models in the group  In the example   radioButtonGroupList  would be an instance of the helper class whose code is    import  UIButtonControlModel  from    ui-button-control model      export class UIRadioButtonGroupListModel      private readonly buttonList   UIButtonControlModel      private readonly debugName   string      constructor buttonList   UIButtonControlModel    debugName   string         this buttonList   buttonList      this debugName   debugName       if  this buttonList    null          throw new Error  null buttonList               if  this buttonList length  lt  2          throw new Error  buttonList has less than 2 elements                  public selectButton buttonToSelect   UIButtonControlModel    void        let foundButton   boolean   false      for let i   0  i  lt  this buttonList length  i            let oneButton   UIButtonControlModel   this buttonList i         if  oneButton     buttonToSelect            oneButton selected   true          foundButton   true          else           oneButton selected   false                      if    foundButton          throw new Error  button not found in buttonList

User · Answer

My manual workaround  which involves manually updating model options when a new radio button is selected   template       lt label  ngFor  let item of radioItems  gt       lt input type  radio  name  options   click   model options   item         checked   item     model options  gt        item      lt  label gt    class App     radioItems    one two three  split         model          options   two         This Plunker demonstrates the above  as well as how to use a button to change the selected radio button -- i e   to prove that the data binding is two-way    lt button  click   model options    one   gt set one lt  button gt

User · Answer

value   item  using  ngFor also works with Reactive Forms in Angular 2 and 4   lt label  ngFor  let item of items  gt       lt input type  radio  formControlName  options   value   item  gt        item    lt  label gt

User · Answer

The following fixed my issue  please consider adding radio input inside the form tag and use the  value  tag to display the value    lt form name  form   ngSubmit     gt       lt div  ngFor  let item of options  gt           lt input   ngModel    model option id  type  radio  name  options   value   item id  gt   amp nbsp     item name         lt  div gt   lt  form gt

User · Answer

Angular 8 Radio Listing Example   Source Link    JSON Response                                       moduleId   1                   moduleName    Employee                    subModules                                                   subModuleId   1                           subModuleName    Add Employee                            selectedRightType   1                                                   subModuleId   2                           subModuleName    Update Employee                            selectedRightType   2                                                   subModuleId   3                           subModuleName    Delete Employee                            selectedRightType   3                                                                                          moduleId   2                   moduleName    Company                    subModules                                                   subModuleId   4                           subModuleName    Add Company                            selectedRightType   1                                                   subModuleId   5                           subModuleName    Update Company                            selectedRightType   2                                                   subModuleId   6                           subModuleName    Delete Company                            selectedRightType   3                                                                                          moduleId   3                   moduleName    Tasks                    subModules                                                   subModuleId   7                           subModuleName    Add Task                            selectedRightType   1                                                   subModuleId   8                           subModuleName    Update Task                            selectedRightType   2                                                   subModuleId   9                           subModuleName    Delete Task                            selectedRightType   3                                                                HTML Template           lt div  ngFor  let module of modules object  gt               lt div gt   module moduleName   lt  div gt               lt table width  100   gt                    lt thead gt                       lt tr gt                           lt th gt Submodule lt  th gt                           lt th gt                               lt input type  radio  name    module moduleName   head radio    ngModel    module selHeader   change   selAllColumn module    value   1  gt  Read Only                          lt  th gt                           lt th gt                               lt input type  radio  name    module moduleName   head radio    ngModel    module selHeader   change   selAllColumn module    value   2  gt  Read Write                          lt  th gt                           lt th gt                               lt input type  radio  name    module moduleName   head radio    ngModel    module selHeader   change   selAllColumn module    value   3  gt  No Access                          lt  th gt                       lt  tr gt                   lt  thead gt                    lt tbody gt                       lt tr  ngFor  let sm of module subModules  gt                           lt td gt   sm subModuleName   lt  td gt                           lt td gt                               lt input type  radio   checked   sm selectedRightType     1     ngModel    sm selectedRightType  name    sm subModuleId   radio   value   1  gt                            lt  td gt                           lt td class  cl-left  gt                               lt input type  radio   checked   sm selectedRightType     2     ngModel    sm selectedRightType  name    sm subModuleId   radio   value   2  gt                            lt  td gt                           lt td class  cl-left  gt                               lt input type  radio   checked   sm selectedRightType     3     ngModel    sm selectedRightType  name    sm subModuleId   radio   value   3  gt                            lt  td gt                       lt  tr gt                   lt  tbody gt               lt  table gt           lt  div gt

User · Answer

Here is the best way to use radio buttons in Angular2  There is no need to use the  click  event or a RadioControlValueAccessor to change the binded property value  setting  checked  property does the trick    lt input name  options  type  radio    ngModel    model options   value   1          checked   model options  1    gt  lt br  gt   lt input name  options  type  radio     ngModel    model options   value   2          checked   model options  2    gt  lt br  gt    I published an example of using radio buttons  Angular 2  how to create radio buttons from enum and add two-way binding  It works from at least Angular 2 RC5

User · Answer

use  value   1  instead of value  1    lt input name  options  ng-control  options  type  radio   value   1     ngModel    model options   gt  lt br  gt    lt input name  options  ng-control  options  type  radio   value   2    ngModel    model options   gt  lt br  gt     Edit   As suggested by thllbrg  For angular 2 1  use   ngModel   instead of   ng-model

[forms] Angular2 - Radio Button Binding

Examples related to forms

Examples related to radio-button

Examples related to angular