Reactive Form: Pass/Post data from addPage to listPage

Ionic Framework ionic-v3
1

Hi everyone!

I want to pass/post data (list item) from the addPage to the listPage via a reactive form. However, nothing is shown in the listPage after I clicked the submit button. Does anyone know what I did wrong in my code?

I would be glad about the simplest solution.

KInd regards,
Thomas

addPage.html

<ion-content>
    <form [formGroup]="videoForm" (ngSubmit)="addVideo(video); clearForm.resetForm()" #clearForm="ngForm">
        <ion-card>
            <ion-item>
                <ion-label floating>Title</ion-label>
                <ion-input type="text" formControlName="title"></ion-input>
            </ion-item>
        </ion-card>

        <ion-card>
            <ion-item>
                <ion-label floating>Description</ion-label>
                <ion-textarea textarea-dynamic rows="1" formControlName="description"></ion-textarea>
            </ion-item>
        </ion-card>

        <button ion-button block type="submit" [disabled]="!videoForm.valid">Submit</button>
    </form>
</ion-content>

addPage.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NavController, NavParams } from 'ionic-angular';

import { CVideoListPage } from '../c-video-list/c-video-list';
import { ConsumerVideoModel } from '../c-video.model';
import { ConsumerVideoHttp } from '../c-video.http';

@Component({
  selector: 'c-video-add',
  templateUrl: 'c-video-add.html',
})

export class CVideoAddPage {

    video = new ConsumerVideoModel();

    videoForm: FormGroup;

    constructor(public navCtrl: NavController, public navParams: NavParams, private superTabsCtrl: SuperTabsController, private formBuilder: FormBuilder, private consumerVideoHttp: ConsumerVideoHttp) {

    }

    ngOnInit() {
        this.videoForm = this.formBuilder.group({
            title: ["", Validators.required],
            description: [""]
        });
    }

   addVideo(video) {
       this.navCtrl.push(CVideoListPage, video);
       this.video = this.videoForm.value;
       this.consumerVideoHttp.addVideo(this.video).subscribe(video => this.videos.push(video));
   }

}

listPage.html

<ion-content>

    <ion-card *ngFor="let video of videos" (click)="videoDetail(video)">
        <button ion-item>
            <ion-thumbnail item-start>
                <img [src]="video.file">
            </ion-thumbnail>
            <h2 ion-text text-wrap color="black" class="text-bolder">{{video.id}} {{video.title}}</h2>
            <p>{{video.publisher}}</p>
            <p text-wrap>
                <ion-icon name="eye"></ion-icon>
                {{video.views | number}} •
                 <ion-icon name="thumbs-up"></ion-icon>
                 {{video.likesPercentage | percent}} •
                 <ion-icon name="time"></ion-icon>
                 {{myDate | amTimeAgo: true}}
             </p>
            <button ion-button small clear icon-only item-end (click)="deleteVideo(video)">
                <ion-icon name="trash" color="dark"></ion-icon>
            </button>
        </button>
    </ion-card>

    <ion-fab right bottom #fab>
        <button ion-fab color="primary" (click)="addVideo()">
            <ion-icon name="videocam"></ion-icon>
        </button>
    </ion-fab>
</ion-content>

listPage.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NavController, NavParams } from 'ionic-angular';


import { CVideoAddPage } from '../c-video-add/c-video-add';
import { ConsumerVideoModel } from '../c-video.model';
import { ConsumerVideoHttp } from '../c-video.http';

@Component({
    selector: 'c-video-list',
    templateUrl: 'c-video-list.html',
})

export class CVideoListPage implements OnInit {

    videos: ConsumerVideoModel[ ];

    video: any;

    constructor(public navCtrl: NavController, public navParams: NavParams, private formBuilder: FormBuilder, private consumerVideoHttp: ConsumerVideoHttp) {
        this.video = navParams.data;
    }

    ngOnInit() {
        this.getVideos();
    }

    getVideos(): void {
        this.consumerVideoHttp.getVideos().subscribe(videos => this.videos = videos);
    }

    addVideo() {
        this.navCtrl.push(CVideoAddPage);
    }

}
2

shoud be

this.navCtrl.push(CVideoListPage, { video: video });

I think.

and

this.video = navParams.get('video');

3

hmm, it doesn’t work. I get this error below:

I tested my code before, but all just on the list page and it worked. But if I try to post a video/item from the add page to the list page it doesn’t work.

Do you have any other idea?

Error
Error.png352×613 29.8 KB

4

I think this error comes from this line

this.consumerVideoHttp.addVideo(this.video).subscribe(video => this.videos.push(video));

Perhaps video is undefined.

5

Yes, the error comes from this line. (this.video) refers to my data model, that’s ok. Where something is wrong, is within the subscribe method, but I need a way to push the form data in the list array on the list page. That’s what I need. Overall a really common thing :).

6

Ok. Your list page is open. Then you open the add page and want to see the data on the list page when the add page is closed right?

If so take a look at modal in the docs.

7

Exactly, in other words or steps:

  1. List page is open with listed videos

  2. User want to add a video and clicks the video add button (seperate page opens). User fills in the form and submit

  3. New video post is shown on the list page

That’s it :).

8

Them open the add page as modal page shoud be perfect for you.

Take a look in the api documentation. It is quite simple.

9

Ok, thanks for your help! Maybe I tried it too much in the Angular way…