Angular 4 default radio button checked by default

Question

I m trying to mark as a default a radiobutton depending on the value I get from my object  it can be True or False  What could I do to mark as a default radiobutton depending on the option    lt label gt This rule is true if  lt  label gt   lt label class  form-check-inline  gt       lt input class  form-check-input  type  radio  name  mode  value  true             ngModel    rule mode  gt  all of the following conditions are true  lt  label gt   lt label class  form-check-inline  gt       lt input class  form-check-input  type  radio  name  mode  value  false            ngModel    rule mode  gt  at least one of the following conditions is true  lt  label gt    I have the true or false set in rule mode

User · Accepted Answer

You can use   ngModel    but you ll need to update your value to  value  otherwise the value is evaluating as a string   It would look like this    lt label gt This rule is true if  lt  label gt   lt label class  form-check-inline  gt       lt input class  form-check-input  type  radio  name  mode   value   true    ngModel    rule mode  gt   lt  label gt   lt label class  form-check-inline  gt       lt input class  form-check-input  type  radio  name  mode   value   false    ngModel    rule mode  gt   lt  label gt    If rule mode is true  then that radio is selected   If it s false  then the other   The difference really comes down to the value   value  true  really evaluates to the string  true   whereas  value   true  evaluates to the boolean true

User · Answer

We can use   ngModel   in following way and have a value selection variable radioSelected  Example tutorial  Demo Link  app component html     lt div class  text-center mt-5  gt     lt h4 gt Selected value is   radioSel name   lt  h4 gt      lt div gt       lt ul class  list-group  gt             lt li class  list-group-item    ngFor  let item of itemsList  gt               lt input type  radio    ngModel    radioSelected  name  list name  value    item value     change   onItemChange item    gt                 item name               lt  li gt       lt  ul gt     lt  div gt       lt h5 gt   radioSelectedString   lt  h5 gt      lt  div gt    app component ts    import  Item  from     app item     import  ITEMS  from     app mock-data       Component       selector   app-root       templateUrl     app component html       styleUrls      app component css          export class AppComponent       title    app       radioSel any      radioSelected string      radioSelectedString string      itemsList  Item     ITEMS          constructor             this itemsList   ITEMS            Selecting Default Radio item here         this radioSelected    item 3           this getSelecteditem                      Get row item from array         getSelecteditem            this radioSel   ITEMS find Item   gt  Item value     this radioSelected           this radioSelectedString   JSON stringify this radioSel                    Radio Change Event       onItemChange item           this getSelecteditem                   Sample Data for Listing          export const ITEMS  Item                                     name  Item 1                   value  item 1                                               name  Item 2                   value  item 2                                               name  Item 3                   value  item 3                                               name  Item 4                   value  item 4                                                           name  Item 5                       value  item 5

User · Answer

getting following error  x000D   x000D  It happens   Error         ngModel cannot be used to register form controls with a parent formGroup directive   Try using       formGroup s partner directive  formControlName  instead   Example  x000D   x000D   x000D

User · Answer

if you re using reactive forms then you can use the following way  consider the following example  in component html    lt p class  quot mr-3 quot  gt  Require Shipping               lt input type  quot radio quot  class  quot ml-2 quot  value  quot true quot  name  quot requiresShipping quot              id  quot requiresShipping quot  formControlName  quot requiresShipping quot  gt                       amp nbsp   Yes   amp nbsp              lt input type  quot radio quot  class  quot ml-2 quot  value  quot false quot  name  quot requiresShipping quot             id  quot requiresShipping quot  formControlName  quot requiresShipping quot  gt                       amp nbsp   No    amp nbsp    lt  p gt    in component ts    export class ClassName implements OnInit         public yourForm  FormGroup              constructor              private fromBuilder  FormBuilder                       this yourForm  this fromBuilder group                     requiresShipping  this fromBuilder control  true                                    now you will get the default selected radio button

[angular] Angular 4 default radio button checked by default

Examples related to angular

Examples related to object

Examples related to radio-button

Examples related to angular-ng-if