how to use checkbox or radio in angular2

[Lagoon wish]

how to use checkbox or radio in angular2?

There is no document in angular.io.

[Gerard Lanphear]

Hi Lagoon.  It's been a frustrating few days for me because I don't think that bindings on radio buttons are working quite right yet in Angular 2. I think the key is that radio inputs use a checked="true" attribute on the checked ones and no attribute at all on the unchecked.  So to solve the problem I used an attribute binding like this: 

[attr.checked]="rdoContentRow.selected ? true : null"  The null value leaves the attribute off completely. 

I rolled my own component which dynamically lays out the radio buttons.   It is data centric and works on an array of IRadioChoice. parentId is a unique id which is used for the "name" property so that they work as a group.  I do not use a <form> tag.

Here it is.

//form.IRadioChoice.ts

export interface IRadioChoice {

    key: string;

    value: string;

    text: string;

    checked: string;

}

//form.radio.ts

import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';

import { IRadioChoice } from './form.IRadioChoice';

@Component({

    selector: 'form-radio',

    templateUrl: 'app/forms/form.radio.html',

})

//This is a control representing a set of radio buttons

export class FormRadio implements OnInit {

    @Input() radioChoices: IRadioChoice[];

    @Input() parentId: number;

    public name: string;

    ngOnInit() : void {

       this.name = this.getRadioModelName(this.parentId);

    }

    public getRadioModelName(parentId: number) : string {

        return "RModel" + parentId.toString();

    }

    public radioChange(itemId: string) {

        var _selectedId = '';

        for (var ndx = 0; ndx < this.radioChoices.length; ndx++) {

            this.radioChoices[ndx].checked = (this.radioChoices[ndx].key == itemId) ? 'checked' : null;

            if (this.radioChoices[ndx].checked == 'checked') { _selectedId = this.radioChoices[ndx].value; }

        }

    }

}

//form.radio.html

<div *ngFor="let rdoContentRow of radioChoices" >

        <label [class.columnar]=true [class.col-xs-1]=true>

                <input type="Radio" [name]="name" 

                [id]="rdoContentRow.key"

                [attr.checked]="rdoContentRow.selected ? true : null"

                (change)="radioChange(rdoContentRow.key)" /> 

                        {{rdoContentRow.text}}

        </label>

</div>

//And here is where it is called in the parent component. You will need to import the component and declare it as a directive

    <div *ngIf="formContentRow.isRadio" [style.margin-top]="15" [class.columnar]=true [class]="getClass(formContentRow)" >

        <form-radio 

        [radioChoices]="formContentRow.radioChoices" 

        [parentId]="formContentRow.id" 

        (change)="handleChange(formContentRow.radioChoices, formContentRow.id)"></form-radio>

    </div>

[Gerard Lanphear]

Oh, And checkboxes would be similar accept there would be no name attribute.

On Sunday, July 10, 2016 at 1:39:15 AM UTC-7, Lagoon wish wrote:

[Sander Elias]

Hi Lagoon,

A quick check proved my suspicion that ngModel takes care of this. It's not different from any other input.

Put this in a template to show how it works..:

  <input type=checkbox [(ngModel)]="myCheck"/>Check
  {{myCheck |json}}

Regards

Sander

[Gerard Lanphear]

Hi Elias, Ah yes, however at least in RC 4 the value on your binding example is not making it into the model inside the component. That is a check box example. With radio groups with a common name property the bindings on the remaining items not checked are not getting updated. My example here is for radios. When I did a check box group component I need to use an event and check the value of the target setting the model value within a method of the component. Regards.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/yvxZVXGCr-I/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.