I want to use radio button in a form using Angular 2
Options : <br/>
1 : <input name="options" ng-control="options" type="radio" value="1" [(ng-model)]="model.options" ><br/>
2 : <input name="options" ng-control="options" type="radio" value="2" [(ng-model)]="model.options" ><br/>
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 ?
use [value]="1" instead of value="1"
<input name="options" ng-control="options" type="radio" [value]="1" [(ngModel)]="model.options" ><br/>
<input name="options" ng-control="options" type="radio" [value]="2" [(ngModel)]="model.options" ><br/>
Edit:
As suggested by thllbrg "For angular 2.1+ use [(ngModel)] instead of [(ng-model)] "
[(ngModel)] instead of [(ng-model)]. Read again. –
Urbanist value="1" [(ngModel)]="model.options". Enclosing the value in square brackets wasn't working –
Corked 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
<div>
<form action="">
<input type="radio" [(ngModel)]="model.sex" name="sex" value="male">Male<br>
<input type="radio" [(ngModel)]="model.sex" name="sex" value="female">Female
</form>
<input type="button" value="select male" (click)="model.sex='male'">
<input type="button" value="select female" (click)="model.sex='female'">
<div>Selected Radio: {{model.sex}}</div>
</div>
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(() => 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 = (_) => {};
onTouched = () => {};
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) => {}): void { this.onChange = fn; }
registerOnTouched(fn: () => {}): void { this.onTouched = fn; }
}
Source : https://github.com/angular2-school/angular2-radio-button
Plunker live demo : http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview
this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', value == this._elementRef.nativeElement.value); –
Phanerozoic My manual workaround, which involves manually updating model.options when a new radio button is selected:
template: `
<label *ngFor="let item of radioItems">
<input type="radio" name="options" (click)="model.options = item"
[checked]="item === model.options">
{{item}}
</label>`
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:
<button (click)="model.options = 'one'">set one</button>
get debug() function what does get stands for ? second is: is there any alternate like this answer for the checkboxes ? please provide some code for checkboxes too. thanks +1 for great answer. –
Bowers get is a TypeScript accessor feature. Post a question for the checkboxes. –
Gamy {{debug(abc)}}? And what is abc? –
Gamy abc is just string, i want to convert into number. so wanna send as parameter from HTML side into class and expect get debug method returns string into number. –
Bowers debug() can do whatever you want it to do... or you can create another component method. You can call this new method like this {{debug2('abc')}} from HTML if you define the method like this debug2(myString:string) { ... } in the component. –
Gamy {{debug2('abc')}} and than abc is not accepted in method debug2(string){....here abc is not accepted} i dont know why ? here is my demo plunkr plnkr.co/edit/SxNyNBGVUJgAfXUKvzrz?p=preview –
Bowers Anotherdate('2015-05-18T02:30:56') won't work. Setters get called when you try to assign a value to a property. In my plunker I created a setDate() function to\hat accepts a new date value, which then assigns to Anotherdate. That assignment will automatically call the setter. –
Gamy {{}} bindings get re-evaluated every change detection cycle. I implemented ngDoCheck() in the AppComponent in the plunker to counts change detection cycles. From that we see that change detection is called 3 times. In dev mode, bindings are checked twice, hence the 6 times. –
Gamy 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.
<input name="options" type="radio" [(ngModel)]="model.options" [value]="1"
[checked]="model.options==1" /><br/>
<input name="options" type="radio" [(ngModel)]="model.options" [value]="2"
[checked]="model.options==2" /><br/>
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.
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}}
<form action="">
<input type="radio" [(ngModel)]="buildTool" name="buildTool" value="gradle">Gradle <br>
<input type="radio" [(ngModel)]="buildTool" name="buildTool" value="maven">Maven
</form>
disableDeprecatedForms and provideForms looks magical and doesn't make any sense. What do these things do? This is redundant unreadable code making unpredictable things of unknown scale. –
Fusco I was looking for the right method to handle those radio buttons here is an example for a solution I found here:
<tr *ngFor="let entry of entries">
<td>{{ entry.description }}</td>
<td>
<input type="radio" name="radiogroup"
[value]="entry.id"
(change)="onSelectionChange(entry)">
</td>
</tr>
Notice the onSelectionChange that passes the current element to the method.
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.
[value]="item" using *ngFor also works with Reactive Forms in Angular 2 and 4
<label *ngFor="let item of items">
<input type="radio" formControlName="options" [value]="item">
{{item}}
</label>`
The following fixed my issue, please consider adding radio input inside the form tag and use the [value] tag to display the value.
<form name="form" (ngSubmit)="">
<div *ngFor="let item of options">
<input [(ngModel)]="model.option_id" type="radio" name="options" [value]="item.id"> {{ item.name }}
</div>
</form>
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:
<input type="radio"
[checked]="maleRadioButtonModel.selected"
(click)="radioButtonGroupList.selectButton(maleRadioButtonModel)"
...
<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 < 2) {
throw new Error("buttonList has less than 2 elements")
}
}
public selectButton(buttonToSelect : UIButtonControlModel) : void {
let foundButton : boolean = false;
for(let i = 0; i < 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");
}
}
}
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
<div *ngFor="let module of modules_object">
<div>{{module.moduleName}}</div>
<table width="100%">
<thead>
<tr>
<th>Submodule</th>
<th>
<input type="radio" name="{{module.moduleName}}_head_radio" [(ngModel)]="module.selHeader" (change)="selAllColumn(module)" [value]="1"> Read Only
</th>
<th>
<input type="radio" name="{{module.moduleName}}_head_radio" [(ngModel)]="module.selHeader" (change)="selAllColumn(module)" [value]="2"> Read Write
</th>
<th>
<input type="radio" name="{{module.moduleName}}_head_radio" [(ngModel)]="module.selHeader" (change)="selAllColumn(module)" [value]="3"> No Access
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let sm of module.subModules">
<td>{{sm.subModuleName}}</td>
<td>
<input type="radio" [checked]="sm.selectedRightType == '1'" [(ngModel)]="sm.selectedRightType" name="{{sm.subModuleId}}_radio" [value]="1">
</td>
<td class="cl-left">
<input type="radio" [checked]="sm.selectedRightType == '2'" [(ngModel)]="sm.selectedRightType" name="{{sm.subModuleId}}_radio" [value]="2">
</td>
<td class="cl-left">
<input type="radio" [checked]="sm.selectedRightType == '3'" [(ngModel)]="sm.selectedRightType" name="{{sm.subModuleId}}_radio" [value]="3">
</td>
</tr>
</tbody>
</table>
</div>
Simplest solution and workaround:
<input name="toRent" type="radio" (click)="setToRentControl(false)">
<input name="toRent" type="radio" (click)="setToRentControl(true)">
setToRentControl(value){
this.vm.toRent.updateValue(value);
alert(value); //true/false
}
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:
<ul>
<li *ngFor="let p of price"><input type="radio" name="price" (click)="getValue(price.value)" value="{{p}}" #price> {{p}}
</li>
</ul>
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
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 <select> </select> works perfectly, both for saving and editing.
<select formControlName="gender" name="gender" class="">
<option value="M">Male</option>
<option value="F">Female</option>
</select>
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.
On Radio button change get the value of the respective buttons with these lines
<label class="radio-inline">
<input class="form-check-input" type="radio" [(ngModel)]="dog" name="cat" checked (change)="onItemChange($event)" value="Dog" />Dog</label>
<label class="radio-inline">
<input class="form-check-input" type="radio" [(ngModel)]="cat" name="cat" (change)="onItemChange($event)" value="Cat" />Cat</label>
https://stackblitz.com/edit/angular-jpo2dm?embed=1&file=src/app/app.component.html
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:
Example HTML:
<input type="radio" id="byAllRadioButton"
name="findByRadioButtonGroup"
[(ngModel)]="findByRadioButtonGroup.dataBindingValue"
[value]="byAllRadioButton.MY_DATA_BINDING_VALUE">
<input type="radio" id="byNameRadioButton"
name="findByRadioButtonGroup"
[(ngModel)]="findByRadioButtonGroup.dataBindingValue"
[value]="byNameRadioButton.MY_DATA_BINDING_VALUE">
Example TypeScript:
findByRadioButtonGroup : UIRadioButtonGroupModel
= new UIRadioButtonGroupModel("findByRadioButtonGroup",
"byAllRadioButton_value",
(groupValue : any) => 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 => {
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);
}
}
}
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:
<input type="radio" name="options" #male (click)="onChange(male.value)">Male
<input type="radio" name="options" #female (click)="onChange(female.value)">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
.
© 2022 - 2024 — McMap. All rights reserved.