Modal with back button: Data are double posted, bug?

@ThomasLohmann wrote:

Hi everyone!

I have a modal (add/formPage) with a back button and submit button at the top. If I submit the reactive form I can see the data on my listPage, that’s good. But if I press the back button I see also the post on the listPage (emty object). The back button shouldn’t post data just go back. For the back button I use the navCtrl pop method. So I don’t call the viewCtrl dismiss method twice. Does anyone have an idea what I did wrong in my code or is that a bug?

Kind regards,
Thomas

listPage.ts

import { Component, OnInit } from '@angular/core';
import { NavController, ModalController } 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[ ];

    constructor(public navCtrl: NavController, public navParams: NavParams, public modalCrtl: ModalController, private consumerVideoHttp: ConsumerVideoHttp) {

    }

    ngOnInit() {
        this.getVideos();
    }

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

    addVideo() {
        let videoModal = this.modalCrtl.create(CVideoAddPage);

        videoModal.onDidDismiss(video => {
            this.consumerVideoHttp.addVideo(video).subscribe(video => this.videos.push(video));
        });

        videoModal.present();
    }

}

listPage.html

<ion-content>
    <ion-card *ngFor="let video of videos">
        <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>

addPage.ts

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

import { ConsumerVideoModel } from '../c-video.model';

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

export class CVideoAddPage {

    video = new ConsumerVideoModel();

    videoForm: FormGroup;

    constructor(public navCtrl: NavController, public viewCtrl: ViewController, private formBuilder: FormBuilder) {

    }

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

    back() {
        this.navCtrl.pop();
   }

   addVideo() {
       this.video = this.videoForm.value;
       this.viewCtrl.dismiss(this.video);
   }

}

addPage.html

<ion-header>
    <ion-toolbar color="light">
        <ion-buttons left>
            <button ion-button icon-only color="dark" (click)="back()">
                <ion-icon name="arrow-round-back"></ion-icon>
            </button>
        </ion-buttons>
        <ion-title>Post Video</ion-title>
        <ion-buttons end>
            <button ion-button icon-only color="dark">
                <ion-icon name="more"></ion-icon>
            </button>
        </ion-buttons>
        <ion-buttons end>
            <button ion-button icon-only color="primary" type="submit" form="submit" [disabled]="!videoForm.valid">
                <ion-icon name="send"></ion-icon>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content>
    <form id="submit" [formGroup]="videoForm" (ngSubmit)="addVideo(); 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>
    </form>
</ion-content>

Posts: 1

Participants: 1

Read full topic