lundi 7 août 2017

I used radiobutton behavior for checkboxes, How shall i get the selected value in nativescript with angular?

I used radiobutton behavior for checkboxes as described here.

Its working fine. But i want to get the selected radiobutton’s boolean value and name. In this case how shall i get? Please suggest.

My codes are,

app.component.ts

   

import { Component, OnInit } from "@angular/core";

import { RadioOption } from "./radio-option";

@Component({
  selector: "ns-items",
  moduleId: module.id,
  templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {
   radioOptions?: Array<RadioOption>;

  constructor(
  ) {}

  ngOnInit(): void {
    // Plain ol' inline Array definition coming up :)
    this.radioOptions = [
      new RadioOption("Radio option 1"),
      new RadioOption("Radio option 2"),
      new RadioOption("Radio option 3")
    ];
  }

  //public checkedChange(modelRef) {
    //console.log("checkedChange:", modelRef.checked);
 // }

  changeCheckedRadio(radioOption: RadioOption): void {
    radioOption.selected = !radioOption.selected;
    if (!radioOption.selected) {
      return;
        }

    // uncheck all other options
    this.radioOptions.forEach(option => {
      if (option.text !== radioOption.text) {
        option.selected = false;
      }
      
    });
  }
}

 
app.component.html
   

<StackLayout *tabItem="{title: 'Radiobuttons'}">
        <Label class="p-10" text="Tap either the buttons or the labels. You can even unselect the radiobutton selection." textWrap="true"></Label>
        <StackLayout class="p-10" *ngFor="let option of radioOptions">
            <StackLayout orientation="horizontal" verticalAlignment="center">
                <CheckBox #elem [checked]="option.selected" (checkedChange)="elem.checked !== option.selected && changeCheckedRadio(option)" class="checkbox"></CheckBox>
                <StackLayout verticalAlignment="center">
                    <Label [text]="option.text" textWrap="true" (tap)="changeCheckedRadio(option)"></Label>
                </StackLayout>
            </StackLayout>
        </StackLayout>
    <Button class="btn btn-primary btn-active" text="Save" (tap)="onSelect()" textWrap="true"></Button>
    </StackLayout>
radio-option.ts

export class RadioOption {
  text: string;
  selected: boolean = false;

  constructor(text: string) {
    this.text = text;
  }
}

Thank you for reading, looking forward to reading your responses!




Aucun commentaire:

Enregistrer un commentaire