Radio, checkbox and Select/option Binding in angular2

Question

Facing some Issue with Radio button ,checkboxes And Select/option Binding in angular2.

1. In case of Radio button why the radio button having false value is not even 'selected' although the value in the model gets updated with false as shown in plukr. but radio button ramains unSelected why so ?

<input type="radio" name="status" (click)="is_active = false"> //not working    
<input type="radio" name="status" (click)="is_active = true"> //working

but

<input type="radio" name="status" (click)="is_active = 'false'"> // working    
<input type="radio" name="status" (click)="is_active = true"> //working

1.1 Secondly how to remove controls (validation) of radio buttons after form submit (radio button getes selected even after form submit, i am using ngModel for form submitting).

2. In case of checkboxes i am bit confused how to get the values of checked checkbox. i dont want to use (click) method to get checked values.

<input type='checkbox' value='1' [checked]='is_checked = one'>One
<input type='checkbox' value='2' [checked]='is_checked = two'>Two
<input type='checkbox' value='3' [checked]='is_checked = three'>Three

i want when the checkbox gets checked value of checked checkbox push into array of checked checkbox otherwise it will splice (above code is not working i know).

<input type='checkbox' value='1' [checked]='checked("one")'>One
<input type='checkbox' value='2' [checked]='checked("two")'>Two
<input type='checkbox' value='3' [checked]='checked("three")'>Three

till now i am using this method and in class i am checking value of checkbox using javascript .checked, if true pushing into array otherwise splicing from array via Index.

Plunk of my working area for radio and checkbox http://plnkr.co/edit/OXnj6U3udgkKYRAVCmkp

3. In case of Select/option everything works fine for me. but i want something like this:

   Route1: Having Few Select/option on Route1. User select few option among of them.

   Then User naviagte To another Route using Routing.

   But i want when User come back to Route1 page gets refreshed or either all the select/option on Route1 get unSelected as on first time.

As @GünterZöchbauer said in Answer i had try the same but again not successful. i am trying this code.

export class LsRules implements OnInit, CanReuse {
   .....Some Code Here...
routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) {
        console.log('routerCanReuse called'); 
        return false; 
    }
   .....Some Code Here...
}

but not even single this console is worked for me. also what is ComponentInstruction here i don't know. where i am wrong ?

Answer 1

1)

Radio buttons have a few issues.

I got it working like

<input type="radio" [ngModel]="{checked: model.sex == 'male'}" (ngModelChange)="model.sex='male'"  name="sex" value="male">Male<br>
<input type="radio" [ngModel]="{checked: model.sex == 'female'}"  (ngModelChange)="model.sex='female'" name="sex" value="female">Female

for a similar question How to bind to radio buttons in angular2 beta 6

2) You can use the (change) event instead to get the value

3) I guess you you get what you want when you implement

routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { return false; }

See also https://angular.io/docs/ts/latest/api/router/CanReuse-interface.html

Answer 2

I think SO was down for few minutes. For checkbox problem you can do it.

<input type='checkbox' value='1' [(ngModel)]='is_checked_one' (change)="myFun('one')" >One
<input type='checkbox' value='2' [(ngModel)]='is_checked_two' (change)="myFun('two')" >two


export class AppComponent {
   is_active:boolean;
   is_checked_one:boolean=false;
   is_checked_two:boolean=false;

  val:Array<any>= [];
    constructor() { 
      console.log('Component called');
    }

    myFun(selected)
    {
      console.log(this.is_checked_one + " " + selected);
        if('one'===selected)
        {
          if(this.is_checked_one===false)
          {
            console.log('one if');
            this.val.push('one');
          }
          else
          {
            console.log('one else');
            let index=  this.val.indexOf('one');
            console.log(index);
            this.val.splice(index,1);
          }
        }
        else
        {
          if(this.is_checked_two==false)
          {
            console.log('two if');
            this.val.push('two');
          }
          else
          {
            console.log('two else');
            let index=  this.val.indexOf('two');
            console.log(index);
            this.val.splice(index,1);
          }
        }
        }
        }

    }
}

working Demo

Answer 3

PrimeNG radio buttons simplifies this by allowing binding to a model value. http://www.primefaces.org/primeng/#/radiobutton