how to get the form values in ionic 3 - html

I have created a form. but how to get selected values in function.
i used dropdown, in that selected value need to send to the function.
product_option[{{tms.productoption_id}}],
optnslist.product_optionvalue_id this two value need to send to function
Html code:
<form (ngSubmit)="logForm(myfoem)">
<ion-grid *ngIf="varibleprd == 'variable'">
<ion-item *ngFor="let tms of optionprd;">
<ion-label>{{tms.option_name}}:</ion-label>
<ion-select [(ngModel)]="tms.option_name" name="product_option[{{tms.productoption_id}}]">
<ion-option *ngFor="let optnslist of tms.optionvalue" [value]="optnslist.product_optionvalue_id">{{optnslist.optionvalue_name}}</ion-option>
</ion-select>
</ion-item>
</ion-grid>
<button block><ion-icon name="add"></ion-icon></button>
</form>
and Ts code:
export class ProductdetailPage {
frmdata:any;
subfrmdata:any;
logForm(subfrmdata){
this.frmdata=subfrmdata.value;
console.log(this.frmdata);
}
}

Please try the below. This might help you:-
In HTML file
<ion-option *ngFor="let optnslist of tms.optionvalue" [value]="optnslist.product_optionvalue_id"
(ionSelect)="logForm(product_option[tms.productoption_id], optnslist.product_optionvalue_id);">
{{optnslist.optionvalue_name}}</ion-option>
Then in the ts file:-
logForm(productoption_id, product_optionvalue_id){
// Do the needful
}

Related

Ionic: button that unchecks all checkboxes

I have a checkbox list setup that will add the selected items into an array which sends it to a service. I have a button that runs a function that empties the array on click, but the checkboxes remain checked.
Here I select items and the red X appears, clicking that will clear the array.
Here is after I click the X, the array clears, but the items remain checked
page.ts
if (this.checkedItems.includes(item)) {
this.checkedItems = this.checkedItems.filter((value) => value != item);
} else {
this.checkedItems.push(item)
}
console.log(this.checkedItems);
}
createRoutine() {
this.workoutService.selectedWorkouts = this.checkedItems;
console.log(this.checkedItems);
}
uncheckAll(){
this.checkedItems = [];
}
page.html
<div>
<ion-searchbar placeholder="Search..." [(ngModel)]="filterTerm" animated="true"></ion-searchbar>
<ion-list class="accordion-list">
<ion-card size="full" >
<ion-card-header>
<ion-item class="workout-title">
<ion-card-title> Workouts</ion-card-title>
<a slot="end"><ion-icon name="close-outline" size="large" color="bic" *ngIf="checkedItems.length > 0" (click)="uncheckAll()"></ion-icon></a>
</ion-item>
</ion-card-header>
<ion-card-content>
<ion-list *ngFor="let workout of bic | filter:filterTerm | orderBy:'asc':'muscle'; let i = index;" class="workout-list" >
<ion-item>
<ion-label>{{workout.name}}</ion-label>
<ion-note>{{workout.muscle}}</ion-note>
<ion-checkbox slot="end" color="bic" (ionChange)="onChange(workout)"></ion-checkbox>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</ion-list>
</div>
So I'm looking for a solution on how to have the uncheckAll() event uncheck the checkboxes after clearing the array.
You need to have an [(ngModel)] for the check box, that will hold the checked status of check box. This should be bounded with the workout node.
We can mark it as [(ngModel)]="workout.isSelected" for example.
Inside uncheckAll loop through the array of bic and set the isSelected of each node as false
Pseudo Codes
Template
<ion-list *ngFor="let workout of bic | filter:filterTerm | orderBy:'asc':'muscle'; let i = index;" class="workout-list">
<ion-item>
<ion-label>{{workout.name}}</ion-label>
<ion-note>{{workout.muscle}}</ion-note>
<ion-checkbox
slot="end"
color="bic"
[(ngModel)]="workout.isSelected"
(ionChange)="onChange(workout)"></ion-checkbox>
</ion-item>
</ion-list>
Component.ts
uncheckAll(){
this.checkedItems = [];
this.bic.forEach(node => node.isSelected = false);
}

Color from cards are not changing after event is fired

So I've a problem where I want to change colors from my cards everytime a customer get subscribed to a gym class. ( Red for already subscribed, yellow when is open to subscription)
The problem I'm getting is, anytime when I make a subscription to one class, all the elements from the array, got the color red, instead of one.
So I've an array of classes(named fechaClases) which looks like this:
My HTML code looks like this:
<ion-card color="light" *ngFor="let fecha of fechaCards">
<ion-item color="warning">
<ion-icon slot="start" name="fitness"></ion-icon>
<ion-label>
<h2 style="font-weight: bold">{{ fecha | date:'d/MMMM/yyyy' | uppercase }}</h2>
</ion-label>
</ion-item>
<!-- CONTENIDO --> ---> **Here is where I want to change colors**
<ion-card-content>
<ng-container *ngFor="let clase of fechaClases">
<ion-item [color]="getColor()" (click)="inscripcion(clase)" *ngIf="clase.horaCierre == fecha">
<h2 slot="start" style="font-weight: bold">{{ clase.horaApertura | date: 'shortTime' }}</h2>
<h2 slot="end">{{ "Cupos disponibles" + " " + clase.cuposDisponibles + "/" + clase.cupos }}</h2>
</ion-item>
</ng-container>
</ion-card-content>
</ion-card>
getColor()
for (let index = 0; index < this.fechaClases.length; index++) {
if (this.fechaClases[index].estaInscripto == true) {
console.log(this.fechaClases[index].estaInscripto, 'true');
return 'danger'
}
else {
return 'warning'
}
}
what i'm doing wrong? Hope anyone can help me :) Thanks in advance guys!
You should think in a more "angular" way.
Your list is created by iterating over your fechaClases array, using the *ngFor directive. You just need a conditional binding of the color property, checking the estaInscripto property of each array object.
So, change this line:
<ion-item [color]="getColor()" (click)="inscripcion(clase)" *ngIf="clase.horaCierre == fecha">
with this one:
<ion-item [color]="clase.estaInscripto? 'danger' : 'warning'" (click)="inscripcion(clase)" *ngIf="clase.horaCierre == fecha">
Also, delete your getColor() function, there is no need for it.
Check this stackblitz (inside the home page .html and .ts files) with simplified, working example of the above.
https://stackblitz.com/edit/ionic-e7pfdz

List articleName in the json

I have a json file as shown below.How to display articleName as a list using angularjs and ionic.I think the json is nested one as shown below.
{"articles":[{"articleId":"2665","articleName":"<\/head>Parental leave<\/body><\/html>"}]}
<ion-list>
<ion-item button detail lines="inset" *ngFor="let film of data">
{{ film.articles.articleName }}
</ion-item
</ion-list>
i followed this tutorial
https://ionicacademy.com/fix-cors-issues-native-http/
*ngFor is a Structural Directive that lets you loop over an array.
articles is an array. You should be looping over that instead of the film which I don't think is anything in your particular context.
Considering your data is:
data = {"articles":[{"articleId":"2665","articleName":"<\/head>Parental leave<\/body><\/html>"}]}
In your template:
<ion-list>
<ion-item button detail lines="inset" *ngFor="let article of data.articles">
{{ article.articleName }}
</ion-item>
</ion-list>
you can try like this
*ngFor loop is iterate over the array of object. so here you can see that we are iterating a loop over data.articles if you want to iterate the loop over the object then you can use the keyvalue pipe
TS
let data = {"articles":[{"articleId":"2665","articleName":"<\/head>Parental leave<\/body><\/html>"}]}
HTML
<!-- with out keyvalue pipe so we are iterating a loop over the array of object -->
<ion-list>
<ion-item button detail lines="inset" *ngFor="let film of data.articles; let i = index;">
{{ film.articleName }}
</ion-item
</ion-list>
<!-- with keyvalue pipe so we are iterating a loop over object -->
<ion-list>
<ion-item button detail lines="inset" *ngFor="let film of articles | keyvalue; let i = index;">
{{ film | json}}
</ion-item>
</ion-list>

Ionic 4 *ngFor does not scroll properly in iOS

I have a popover with ion-content. That content is replicated over a *ngFor with a maximum height of the ion-content to 400px. When the new content is added (from a user search) the scroll doesn't work properly on iOS. See below:
Chrome and Safari on my computer (working correctly):
On iOS, it is not setting the scroll area properly, same code. What you will see is I try to scroll to see the bottom of the list, but it bounces back up each time as if I were at the bottom of my content:
I tried putting it in an ion-list as well, I don't really want to do that though. It didn't work either.
Here is the HTML (scrollable is verified true, get-user-location class just sets max height to 400px):
<ion-content [scrollY]="scrollable" class="get-user-location">
<form [formGroup]="form">
<h5 padding no-margin *ngIf="message">{{ message }}</h5>
<ion-item>
<ion-input
color="primary"
(keyup.enter)="searchClicked()"
formControlName="search"
></ion-input>
<ion-button (click)="searchClicked()" fill="clear"
><ion-icon onclick="searchClicked()" name="search" slot="icon-only"></ion-icon
></ion-button>
</ion-item>
<ion-item *ngIf="searchStatus">
{{ searchStatus }}
</ion-item>
<ion-radio-group formControlName="radio" (ionSelect)="radioSelected($event)">
<ion-item *ngFor="let searchResult of searchResults; let i = index">
<ion-radio mode="md" value="{{ i }}" margin-end></ion-radio>
<ion-label>{{ searchResult!.name }}</ion-label>
</ion-item>
<ion-item>
<ion-radio mode="md" value="city" margin-end></ion-radio>
<ion-label>Default city listed below</ion-label>
</ion-item>
</ion-radio-group>
<ion-item>
<ion-select
okText="Okay"
cancelText="Dismiss"
formControlName="city"
(ionChange)="cityChanged($event)"
>
<ion-select-option *ngFor="let city of cities" [value]="city.id">
{{ city.name }}
</ion-select-option>
</ion-select>
</ion-item>
<ion-button
*ngIf="showSubmit"
(click)="dismiss()"
[disabled]="!form.valid"
fill="clear"
class="button-padding-start large"
margin
>Submit</ion-button
>
</form>
</ion-content>
It's a bug:
https://github.com/ionic-team/ionic/issues/16910
Remove ion-content and add this to your component's scss:
.backdrop-no-scroll ion-content {
--overflow: hidden;
}
Try
<ion-content no-bounce has-bouncing="false">
...
</ion-content>
I found out that if it's a ionic bug on iOS, there are multiple ways to "resolve" the issue.
(recommended) First:
Add a couple of empty ion-item at the end of the list with the property lines="none" (<ion-item lines="none"></ion-item>)
(I do not recommend) Second:
Set no-bounce has-bouncing="false" to the ion-content
(I do not recommend) Third:
Remove ion content and add to the CSS file .backdrop-no-scroll ion-content { --overflow: hidden; }

Angular - print element of JSON just once

This is my code:
<ion-content padding>
<h1>Datum: </h1>
<ion-list>
<ion-item *ngFor="let u of tecaj">
<h2>{{u.datum}}</h2>
<h2>{{u.drzava}} | {{u.valuta}}</h2>
<p>{{u.srednji_tecaj}}</p>
</ion-item>
</ion-list>
</ion-content>
and I want to print date just once, so
<h2>{{u.datum}}</h2> just once in first <h1> after "Datum:"
on screenshot there is my JSON file. how do I take just one element of JSON object without *ngFor?
Others have proposed good solutions, but the ngFor directive gives you access to several variables (index, first, last, odd and even) which allow even cleaner and more elegant code. So that means we can do the following:
<ion-item *ngFor="let u of tecaj; let first = first">
<h2 *ngIf="first">{{u.datum}}</h2>
I would say if you don't want to use for loop then I would go with David but I don't see any problem in using for loop and you can extract a single date by using the index in the loop as follows
<ion-content padding>
<h1>Datum: </h1>
<ion-list>
<ion-item *ngFor="let u of tecaj; index as i">
<div *ngIf="i===0">
<h2>{{u.datum}}</h2>
<h2>{{u.drzava}} | {{u.valuta}}</h2>
<p>{{u.srednji_tecaj}}</p>
</div>
</ion-item>
</ion-list>
</ion-content>
You can change it as follows to access the datum, drzava, valuta and srednji_tecaj properties of the first element in the array:
<h1>Datum: </h1>
<ion-item *ngIf="tecaj">
<h2>{{ tecaj[0]?.datum }}</h2>
<h2>{{ tecaj[0]?.drzava}} | {{ tecaj[0]?.valuta }}</h2>
<p>{{ tecaj[0]?.srednji_tecaj }}</p>
</ion-item>
Everything inside interpolation ({{}}) will be evaluated and stringified and can then be rendered on the DOM.