Runtime error: Can't resolve all parameters for

Ionic Framework ionic-v3
1

So I have this form where users add a picture and some small details about a Hazard.

On the HazardPage where they fill in the small details they get a next button - this next button sends them to a submit page to enter some final details.

Once they click submit - if the form has been submitted successfully I would like the reset the form on the HazardPage.

So something like this:
HazardPage → fill in form (clicks next) → SubmitPage → make sure details are correct (clicks submit) → Form submitted (now reset the form on HazardPage

So far I have this:

import { Component, Injectable } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';

import { SubmitPage } from '../submit/submit';

import { AlertController, NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { Camera } from '@ionic-native/camera';
import { ImagePicker } from '@ionic-native/image-picker';

/**
 * Generated class for the HazardPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@Component({
    selector: 'page-hazard',
    templateUrl: 'hazard.html',
})

@Injectable()
export class HazardPage {
    public src64Img: string;
    private base64Img: string;

    public hazardForm: FormGroup;

    pushPage: any;

    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        private alertCtrl: AlertController,
        private Camera: Camera,
        private ImagePicker: ImagePicker,
        private Storage: Storage,
        private formBuilder: FormBuilder
    ) {

        this.hazardForm = this.formBuilder.group({
            hazardImage: [''],
            hazardType: ['', Validators.required],
            hazardTypeOther: [''],
            hazardLocation: ['', Validators.required],
            isHazardPresent: ['', Validators.required]
        });
    }

    nextPage()
    {
        this.navCtrl.push(SubmitPage, this.hazardForm.value);
    }

}

import { Component, Injectable } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { Http } from '@angular/http';

import { HazardPage } from '../hazard/hazard';
import { FinishPage } from '../finish/finish';

import { AlertController, NavController, NavParams, ModalController } from 'ionic-angular';
import { Storage } from '@ionic/storage';

@Component({
    selector: 'submit-page',
    templateUrl: 'submit.html'
})

export class SubmitPage {

    private finalForm: FormGroup;

    submitAttempt: boolean = false;

    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        public modalCtrl: ModalController,
        private hazardPage: HazardPage,
        private alertCtrl: AlertController,
        private http: Http,
        private Storage: Storage,
        private formBuilder: FormBuilder
    )
    {

        this.finalForm = this.formBuilder.group({
            hazardImage: [''],
            hazardType: [''],
            hazardTypeOther: [''],
            hazardLocation: [''],
            isHazardPresent: [''],
            name: ['', Validators.required],
            telephone: ['', Validators.required],
            email: ['', Validators.required],
            staffNumber: ['']
        });

        let hazardImage = this.navParams.get('hazardImage');
        let hazardType = this.navParams.get('hazardType');
        let hazardTypeOther = this.navParams.get('hazardTypeOther');
        let hazardLocation = this.navParams.get('hazardLocation');
        let isHazardPresent = this.navParams.get('isHazardPresent');

        this.finalForm.patchValue({
            hazardImage: hazardImage
        });

        this.finalForm.patchValue({
            hazardType: hazardType
        });

        this.finalForm.patchValue({
            hazardTypeOther: hazardTypeOther
        });

        this.finalForm.patchValue({
            hazardLocation: hazardLocation
        });

        this.finalForm.patchValue({
            isHazardPresent: isHazardPresent
        });

        this.Storage.get('name').then((val) => {
            this.finalForm.patchValue({
                name: val
            });
        });

        this.Storage.get('telephone').then((val) => {
            this.finalForm.patchValue({
                telephone: val
            });
        });

        this.Storage.get('email').then((val) => {
            this.finalForm.patchValue({
                email: val
            });
        });

        this.http = http;

        this.hazardPage = hazardPage;
    }

    submitHazardForm()
    {
        this.submitAttempt = true;

        if ( !this.finalForm.valid )
        {
            let alert = this.alertCtrl.create({
                title: 'Invalid!',
                subTitle: 'Please fill in all required fields',
                buttons: ['Dismiss']
            });
            alert.present();
        }
        else
        {
            console.log(this.finalForm.value);

            this.http.post( "http://example.com/api", this.finalForm.value )
                .subscribe( data => {
                    let thankYou = this.modalCtrl.create(FinishPage);
                    thankYou.present();
                    this.submitAttempt = false;
                    this.hazardPage.hazardForm.reset();
                    this.navCtrl.popToRoot();
                }, error => {
                    console.log(error);
                    let alert = this.alertCtrl.create({
                        title: 'Error!',
                        subTitle: 'Ooopss! There seems to be an error submitting the form data',
                        buttons: ['Dimiss']
                    });
                    alert.present();
                    this.submitAttempt = false;
                } );
        }
    }
}

But the error I keep getting is

Runtime Error
Can’t resolve all parameters for SubmitPage: ([object Object], [object Object], [object Object], ?, [object Object], [object Object], [object Object], [object Object]).

2

You shouldn’t add the page into your decorator, it’s enough if you import it :slight_smile:

3

Now I get this error trying to clear the form

Property ‘hazardForm’ does not exist on type ‘typeof HazardPage’.

4

That’s because you’re trying to reset a form that’s on a total different page. That’s not possible I’m afraid. You should reset the form if you’re return to the HazardPage.

5

Hmmm… I was scared someone was going to tell me that :joy: how exactly could I reset the form if I return to the HazardPage from say the Submit Page?

6

What about calling this.navCtrl.setRoot('HazardPage',{ resetform: true });

so just set it as the root page, and pass it some params to tell hazardpage to reset the form. Then in hazardpage check for those params when entering.

7

Yep that worked great thank you :slight_smile:

8

I think slinging complex stuff in NavParams is a brittle and unintuitive approach. You are basically implementing a “wizard” pattern, and I think the best way of doing this is with a shared service that is injected by all involved pages that exposes a Hazard somehow. Upon successful submit, the Hazard is reset to a blank state.

This way, the HazardPage doesn’t need to know or care about any of this: it simply resets its form to reflect the current state of the active Hazard.