Geek Answers Handbook

By default, the "Corner 4" switch is set by default.

I am trying to mark the default radio object depending on the value that I get from my object, it can be True or False. What can I do to mark as a standard radio unit 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 true or false set in rule.mode .

+17
object radio-button angular angular-ng-if
source share
3 answers

You can use [(ngModel)] , but you need to update value to [value] , otherwise the value will be evaluated as a string. It will look like this:

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

If rule.mode true, then this radio is selected. If it is false, then another.

The difference really comes down to value . value="true" really evaluates to the string "true", while [value]="true" evaluates to boolean true.

+37
source share

We can use [(ngModel)] as follows and have a radioSelected value selector

Textbook example

Demo link

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

Listing Data Examples

  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' } ];
+2
source share

I think this should work:

 <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>
-one
source share

More articles:


All Articles