I have implemented this form method in Ionic:
After filling out the form and submitting it, a new slide appears. However, upon restarting the app, everything resets back to the first slide. How can I address this issue? I would like to be able to save these input values in the slides for future use...
Here are some snippets of the code:
.html:
<ion-slide *ngFor="let slide of slides">
<ion-header>
<ion-navbar>
<ion-title text-center class="persian pdtop" > <ion-icon name='{{slide.icon}}'> </ion-icon> {{slide.ttl}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<img [src]="slide.image" class="slide-image"/>
<h2 class="slide-title persian2" [innerHTML]="slide.title"></h2>
<p class="persian" [innerHTML]="slide.description"></p>
</ion-content>
</ion-slide>
<form [formGroup]="todo" (ngSubmit)="logForm()">
<ion-item>
<ion-label>Title</ion-label>
<ion-input type="text" formControlName="title"></ion-input>
</ion-item>
<ion-item>
<ion-label>Icon</ion-label>
<ion-input type="text" formControlName="icon"></ion-input>
</ion-item>
<ion-item>
<ion-label>Header</ion-label>
<ion-input type="text" formControlName="ttl"></ion-input>
</ion-item>
<ion-item>
<ion-label>Image</ion-label>
<ion-input type="text" formControlName="image"></ion-input>
</ion-item>
<ion-item>
<ion-label>Description</ion-label>
<ion-textarea formControlName="description"></ion-textarea>
</ion-item>
<button ion-button type="submit" [disabled]="!todo.valid">Submit</button>
</form>
.ts:
// ...
export class HomePage {
private todo : FormGroup;
constructor(public nav: NavController, private formBuilder: FormBuilder ) {
this.todo = this.formBuilder.group({
title: ['', Validators.required],
description: [''],
icon: [''],
ttl: [''],
image: [''],
});
}
logForm(){
console.log(this.todo.value);
this.slides.push(this.todo.value);
}
slides = [
{
title: "HBD",
description: "The <b>Ionic Component Documentation</b> showcases a number of useful components that are included out of the box with Ionic.",
image: "",
ttl: "no.1",
icon: "heart",
},
{
title: "What is Ionic?",
description: "<b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.",
image: "",
ttl: "my love",
icon: "heart",
}
];
}
//...
Upon submitting the form, a new slide is displayed. Unfortunately, after restarting the app, the data reverts back to the initial state. Is there a way to retain these input values in the slides for persistent usage?