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?
<label>This rule is true if:</label>
<label class="form-check-inline">
<input class="form-check-input" type="radio" name="mode" value="true"
[(ngModel)]="rule.mode"> all of the following conditions are true
</label>
<label class="form-check-inline">
<input class="form-check-input" type="radio" name="mode" value="false"
[(ngModel)]="rule.mode"> at least one of the following conditions is true
</label>
I have the true or false set in rule.mode
.
This question is related to
angular
object
radio-button
angular-ng-if
if you're using reactive forms then you can use the following way. consider the following example.
`<p class="mr-3"> Require Shipping:
<input type="radio" class="ml-2" value="true" name="requiresShipping"
id="requiresShipping" formControlName="requiresShipping">
Yes
<input type="radio" class="ml-2" value="false" name="requiresShipping"
id="requiresShipping" formControlName="requiresShipping">
No
</p>`
`
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.
We can use [(ngModel)] in following way and have a value selection variable radioSelected
app.component.html
<div class="text-center mt-5">
<h4>Selected value is {{radioSel.name}}</h4>
<div>
<ul class="list-group">
<li class="list-group-item" *ngFor="let item of itemsList">
<input type="radio" [(ngModel)]="radioSelected" name="list_name" value="{{item.value}}" (change)="onItemChange(item)"/>
{{item.name}}
</li>
</ul>
</div>
<h5>{{radioSelectedString}}</h5>
</div>
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 => 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'
}
];
getting following error
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_
Source: Stackoverflow.com