Issue
im trying to print the name of checked checkboxes in an ion-texarea. The app ask for the name, the genre(masculine, femenine) and description(tall, small, smart, ugly, etc.), at the bottom there's an ion-textarea to print a sentence like, Name is a genre and She/He is description of checked checkboxes. ex. John is a Man and he is Tall, Smart, and Ugly.
the html code i have is:
<ion-item>
<ion-label color="primary">Genre</ion-label>
<ion-list>
<ion-item *ngFor="let genre of genre">
<ion-label>{{genre.name}}</ion-label>
<ion-checkbox slot="end" [(ngModel)]="genre.isChecked"></ion-checkbox>
</ion-item>
</ion-list>
</ion-item>
<ion-list-header>
<ion-label color="primary">Descripcion</ion-label>
</ion-list-header>
<div>
<ion-col><ion-button expand="full" (click)="gen(); result()" >Criticar</ion-button></ion-col>
<ion-textarea [ngModel]="critica"></ion-textarea>
</div>
the typescript code is:
export class HomePage {
nombre:string;
genero:any;
critica:any;
genre: any=[
{name:'Masculino', isChecked: false},
{name:'Femenino', isChecked: false}
];
gen(){
this.genero=this.genre.filter(value => {return value.isChecked});
result(){
this.critica = this.genero;
Solution
You haven't added the full code I guess. Even the description values are not disapplying. Anyhow I did a modification to your code so you can get the values of what you have checked. It might help you to proceed.
Currently your text area shows as [object] kind of output.
Try to refactor your code like mentioned in below. So you can get the checked values. But make sure to disable the other check boxes on the current section once you checked a checkbox. checkbox.
gen() {
this.genre.forEach(item => {
if(item.isChecked == true){
this.genero = item;
return;
}
})
}
result() {
this.critica = this.genero.name;
}
Answered By - Hash_Dew
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.