J'essaie de marquer par défaut un radiobutton en fonction de la valeur obtenue de mon objet. Il peut être vrai ou faux. Que puis-je faire pour marquer en tant que radiobutton par défaut en fonction de l'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>
J'ai le vrai ou le faux défini dans rule.mode
.
Vous pouvez utiliser [(ngModel)]
, mais vous devrez mettre à jour votre value
en [value]
, sinon la valeur est évaluée sous forme de chaîne. Cela ressemblerait à ceci:
<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">
</label>
<label class="form-check-inline">
<input class="form-check-input" type="radio" name="mode" [value]="false" [(ngModel)]="rule.mode">
</label>
Si rule.mode
est vrai, cette radio est sélectionnée. Si c'est faux, alors l'autre.
La différence réside vraiment dans la value
. value="true"
correspond réellement à la chaîne 'true', alors que [value]="true"
correspond à la valeur booléenne true.
Nous pouvons utiliser [(ngModel)] de la manière suivante et avoir une variable de sélection de valeur radioSélectionné
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();
}
}
Exemples de données à lister
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'
}
];