I got a problem while updating my Ionic checkbox values to Firebase.
Here is my HTML:
<ion-list>
<ion-item>
<ion-label>Problemfeld 1</ion-label>
<ion-checkbox checked="false" [(ngModel)]="problemfeld1" name="problemfeld1"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Problemfeld 2</ion-label>
<ion-checkbox checked="false" [(ngModel)]="problemfeld2" name="problemfeld2"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Problemfeld 3</ion-label>
<ion-checkbox checked="false" [(ngModel)]="problemfeld3" name="problemfeld3"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Problemfeld 4</ion-label>
<ion-checkbox checked="false" [(ngModel)]="problemfeld4" name="problemfeld4"></ion-checkbox>
</ion-item>
</ion-list>
<button ion-button (click)="updateProblemfeld()" [navPush]="problemdefinitionPage">Weiter</button>
This is the function in my Ionic Page:
updateProblemfeld(problemfeld1, problemfeld2,problemfeld3,problemfeld4) {
this.szenarioProvider.updateProblemfeld(problemfeld1, problemfeld2, problemfeld3, problemfeld4);
}
And this is how I pass it to Firebase:
updateProblemfeld(problemfeld1: boolean, problemfeld2: boolean, problemfeld3: boolean, problemfeld4: boolean): firebase.Promise<any> {
return firebase.database().ref('/szenarioData')
.child(firebase.auth().currentUser.uid)
.child('problemfeld').update({
problemfeld1: problemfeld1,
problemfeld2: problemfeld2,
problemfeld3: problemfeld3,
problemfeld4: problemfeld4,
});
}
And this is what the Error looks like:
Firebase.update failed: First argument contains undefined in property 'szenarioData.hR4feTPka8fuMDGK3YV0nFrDs1A3.problemfeld.problemfeld1'
Can you think of a solution for this?
Thanks in advance.
My god,
I looked for a solution for 2 days till I decided to ask this question.
And 30 minutes after asking I found it:
Button in the HTML document needs to be like this:
<button ion-button (click)="updateProblemfeld(problemfeld1, problemfeld2, problemfeld3, problemfeld4)" [navPush]="problemdefinitionPage">Weiter</button>
I simply forgot to pass the values...
Related
I have this html :
<ion-item text-wrap>
<p class="fw-bold">Rules & Guidelines </p> <br />
<ion-text>
<ion-icon name="american-football" item-start></ion-icon>
<ion-label>
Voucher terms & conditions
</ion-label>
<ion-toggle color="secondary" item-end></ion-toggle>
</ion-text>
</ion-item>
Now I want to display like this :
First line : Rules & Guidelines
Second line : icon Voucher terms & conditions toogle
Now I have all this content in one line, like this
Try this,
<ion-item><b>Rules & Guidelines</b></ion-item>
<ion-item>
<ion-icon name="american-football" slot="start"></ion-icon>
<ion-label>
Voucher terms & conditions
</ion-label>
<ion-toggle color="secondary" slot="end"></ion-toggle>
</ion-item>
You should get this,
I am generating a bunch of slides with questions; The last slide is an overview of the previous answered questions. On the bottom I have a submit button that I want to always be visible on that (last) slide at the bottom of the page.
I tried the following:
Use a ion-fab-button, which doesnt stick.
Use CSS with "position: sticky !important;" on the button
Wrap everything but the button in a ion-card-content
<ion-slide>
<ion-card>
<h1>Questions Overview</h1>
<ion-list *ngFor="let question of questions">
<ion-item>
<ion-label>
Question: {{ question.question }}
</ion-label>
</ion-item>
<ion-item>
<ion-label>
Your Answer: {{ question.answer }}
</ion-label>
</ion-item>
</ion-list>
<ion-button (click)="onSubmit()" expand="full">Submit</ion-button>
</ion-card>
</ion-slide>
I am not that experienced in the framework so I dont if there is something else I could try.
When using google I only found questions and answers about buttons outside of ion-content. This doesnt help since everything used on the page is in ion-content and if I would do it this way the button will also be shown on all the other slides.
Edit:
TL;DR Workaround:
#ViewChild('slides', {read: IonSlides}) slides: IonSlides; in .ts file
Use Event (ionSlideReachEnd)="onEnd()" on <ion-slides> in .html
onEnd() {
this.slides.isEnd().then(endReached => {
this.reachedEnd = endReached // reachedEnd is a variable that can be checked in the html file
}
I have used a workaround until I find a proper solution. I use the above used code to check if I have reached the end of my slides. After this I display a ion-footer which contains the button. The footer is stickied on the bottom of the page and not to the slides like I want to have it. The additional bonus is that now the user always has the ability to submit on any slide when reviewing his answers.
A simple *ngIf can do the job for you... so we put the condition that the button will only be visible on the last slide, we know that the array index of the last slide will be equal to the length of the array -1... hence we put the condition: <ion-button *ngIf='idx==questions.length-1' (click)="onSubmit()" expand="full">Submit</ion-button>
relevant HTML:
<ion-content padding>
<ion-slides>
<ion-slide *ngFor="let question of questions; let idx = index">
<ion-card>
<h1>Questions Overview</h1>
<ion-list>
<ion-item>
<ion-label>
Question: {{ question.question }}
</ion-label>
</ion-item>
<ion-item>
<ion-label>
Your Answer: {{ question.answer }}
</ion-label>
</ion-item>
</ion-list>
<ion-button *ngIf='idx==questions.length-1' (click)="onSubmit()" expand="full" style='border:2px solid red;padding:5px; margin:5px; background:lightpink; position: absolute; bottom: 0%; left:50%; margin-left:-17px'>Submit</ion-button>
</ion-card>
</ion-slide>
</ion-slides>
</ion-content>
check the about tab on the working stackblitz here
I have a chat application, when I click into the textarea to start typing a new message the keyboard pushes up all the content above. This means that the ion-header disappears. I would like this to remain visible at the top of the screen at all times.
Here is an example GIF: https://i.imgur.com/a/GcmagJi
The ion-header code is:
<ion-header>
<ion-navbar>
<ion-buttons ion-fixed end>
<button ion-button icon-only (click)="closeChat()">
<ion-icon name="close-circle"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
The ion-footer code is:
<ion-footer>
<ion-grid>
<ion-row>
<ion-col col-9>
<textarea rows="3" [(ngModel)]="data.message" (keyup.enter)="sendMessage()" placeholder="Type your message ..."></textarea>
</ion-col>
<ion-col col-3>
<button ion-button (click)="sendMessage()">Send</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
In my app.module.ts file I have used:
imports: [
BrowserModule,
LongPressModule,
IonicModule.forRoot(MyApp, {
scrollPadding: false,
scrollAssist: true,
autoFocusAssist: false
}
),
IonicStorageModule.forRoot(),
DragulaModule,
HttpModule
]
In my chat.ts I have:
constructor(private keyboard: Keyboard) {
this.keyboard.disableScroll(false);
}
Despite all of these things nothing seems to keep the header fixed in place.
I have added the full code for my chat.html and chat.ts to the GitHib Gists below:
https://gist.github.com/christopherib/4b9e70590fb322bdc33ffbbe42d50685
https://gist.github.com/christopherib/cb3d234564c0feb1e8bf5b96f8d023c3
Try to run keyboard.disableScroll(true) right after platform.ready()
Or try to run keyboard.hideFormAccessoryBar(false);
Have you tried using?
<ion-content fullscreen><ion-content>
I'm currently using Ionic 4 and the header still looking good when the keyboard opens
I have the following structure
<ion-header no-border>
<ion-toolbar>
<ion-fab-button>
<ion-icon name="ios-arrow-back"></ion-icon>
</ion-fab-button>
<ion-title></ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
......
</ion-content>
<ion-footer no-border>
......
</ion-footer>
When the keyboard appears, run a js function. When doing so, give the header a negative margin.
Ex:
function myFunction() {
document.getElementById("myDiv").style.marginBottom = "-15px";
}
Source: https://www.w3schools.com/jsref/prop_style_marginbottom.asp
There is probably more efficient solution but if position:fixed doesn't work this is the best one I can come up with.
You can use ion-item-divider under the ion-header like
<ion-header>
<ion-item-divider sticky>
<!-- Content -->
</ion-item-divider>
</ion-header>
sticky properties used to when header up the they fixed on top
Hello I wanted to delete record from the realtime firebase database.I have got the key which I wanted to delete, but when I call remove function on reference is shows me error "Reference.remove failed: first argument must be a valid function."
i had refer this docs.
here is my code:
home-customer.ts
deleteLoad(load) {
this.AuthProvider.removeNote(load.key).then(() => {
this.navCtrl.setRoot('HomeCustomerPage');
});
}
home-customer.html
<ion-list *ngFor="let load of LoadMaster">
<ion-item>
Source:
{{load.Source}}
</ion-item>
<ion-item>
Destination:
{{load.Destination}}
</ion-item>
<ion-item>
Load Type:
{{load.LoadType}}
</ion-item>
<button ion-button block (click)="UpdateLoad(load.key)">
Update
</button>
<button ion-button block (click)="deleteLoad(load)">
Delete
auth.ts
removeNote(key) {
console.log('key'+key);
return firebase.database().ref(`/LoadMaster/`).remove(key);
}
It's very sad since more then 3 year no answer...I think this answer will now help to others...
`var adaRef = firebase.database().ref('users/ada');
adaRef.remove()
.then(function() {
console.log("Remove succeeded.")
})
.catch(function(error) {
console.log("Remove failed: " + error.message)
});`
More can be found Firebase documentation
I am using ionic 2 and trying to allow a user to select a date and a time in two separate ion-datetime fields.
The HTML
<form [formGroup]="newEventForm">
...
<ion-item>
<ion-datetime formControlName="date" displayFormat="MMM DD, YYYY" [(ngModel)]="eventDate" min="2017-01-01" max="2020-10-31"></ion-datetime>
</ion-item>
<ion-item>
<ion-datetime formControlName="time" displayFormat="h:mm a" [(ngModel)]="eventTime"></ion-datetime>
</ion-item>
<ion-item>
<button ion-button block default (click)="addEvent()">Add Event</button>
</ion-item>
</form>
The Typescript:
export class NewEventPage {
eventTime: String = new Date().toISOString();
eventDate: String = new Date().toISOString();
constructor(...) {
...
this.newEventForm = formBuilder.group({
...,
date: ['', Validators.compose([Validators.required])],
time: ['', Validators.compose([Validators.required])]
});
}
public addEvent() {
if(!this.newEventForm.valid) {
console.error("Validation problems");
} else {
console.log("Form is valid", this.newEventForm.value);
}
}
}
When I click the submit button, I get everything back, but I'm getting the same dateTime for both date and time, even though I'd like it to be different. They both return whatever the date is and it seems the time does not change.
Any thoughts on why this could be?
I would try changing...
<ion-item>
<ion-datetime formControlName="date" displayFormat="MMM DD, YYYY" [(ngModel)]="eventDate" min="2017-01-01" max="2020-10-31"></ion-datetime>
</ion-item>
<ion-item>
<ion-datetime formControlName="time" displayFormat="h:mm a" [(ngModel)]="eventTime"></ion-datetime>
</ion-item>
to
<ion-item>
<ion-datetime formControlName="date" displayFormat="MMM DD, YYYY" [(ngModel)]="eventDate" (ngModelChange)="eventDate" min="2017-01-01" max="2020-10-31"></ion-datetime>
</ion-item>
<ion-item>
<ion-datetime formControlName="time" displayFormat="h:mm a" [(ngModel)]="eventTime" (ngModelChange)="eventTime"></ion-datetime>
</ion-item>
ngModelChange will update the variable everytime it is changed. Probably simplest way to get it working.