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