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.