reactivos - page title angular 4

Botón de radio predeterminado de Angular 4 activado de forma predeterminada

Question

Estoy tratando de marcar como predeterminado un botón de radio según el valor que obtenga de mi objeto, puede ser Verdadero o Falso. ¿Qué podría hacer para marcar como un botón de radio predeterminado según la opción?

<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>

Tengo el conjunto verdadero o falso en rule.mode .

Answer 1

Podemos usar [(ngModel)] de la siguiente manera y tener una variable de selección de valor radioSelected

Ejemplo de tutorial

Enlace de demostración

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();
}
}

Datos de muestra para listado

 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''
}
];

Answer 2

Puede usar [(ngModel)] , pero deberá actualizar su value a [value] contrario, el valor se evalúa como una cadena. Se vería así:

<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 es verdadero, entonces se selecciona esa radio. Si es falso, entonces el otro.

La diferencia realmente se reduce al value . value="true" realmente se evalúa con la cadena ''true'', mientras que [value]="true" evalúa con el valor booleano true.