CODEWITHSUNDEEP
angularionic-frameworkangular-reactive-formsangular-forms
mcadam4000
mcadam4000

Reputation: 17

How to create a multi page form with ionic angular

Currently working on my first ionic app using angular. I want the form for users profiles to have multiple pages as there is a lot of data to be taken in.

At the moment I have all my pages set to take in the value entered into the form and return that value in the console. I'm now trying to get that data to be stored locally and be returned after the form is complete.

The trouble I am having is with taking the data in after each page. The Error I am receiving is: Expected 11 arguments, but got 2. the rest of the 'arguments' are on other pages of the form.

Is there a way of avoiding this issue? I know I could have my form on one page, but from a UX point of view, separate pages would work better.

Any help would be appreciated.

CODE:

artist.modul.ts:

    export class Artist {
  constructor(
    public id: string,
    public name: string,
    public rating: number,
    public genre: string,
    public imageUrl: string,
    public cost: number,
    public equipment: string,
    public descrpition: string,
    public band: string,
    public location: string,
    public type: string,
    public userId: string
    ) {}

}

music-type.page.ts:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ArtistService } from '../../artist.service';

@Component({
  selector: 'app-music-type',
  templateUrl: './music-type.page.html',
  styleUrls: ['./music-type.page.scss'],
})
export class MusicTypePage implements OnInit {
  aForm: FormGroup;
  venType = [
    { name: 'Pub', isChecked: false },
    { name: 'Club', isChecked: false },
    { name: 'Wedding', isChecked: false },
    { name: 'Event', isChecked: false }
  ];

  constructor(private artistService: ArtistService) { }

  ngOnInit() {
    this.aForm = new FormGroup({
      band: new FormControl(null, {
        updateOn: 'blur',
        validators: [Validators.required]
      }),
      type: new FormControl(null, {
        updateOn: 'blur',
        validators: [Validators.required]
      })
    });
  }

  onCreateArtist(){
    if (!this.aForm.valid){
      return;
    }
    console.log(this.aForm);
    this.artistService.addArtist(this.aForm.value.band, this.aForm.value.type);
  }
}

music-type.page.html:

<ion-content>
  <form [formGroup]="aForm">
    <ion-grid class="ion-padding">
      <ion-row>
        <ion-col size="12" size-sm="8" offset-sm="2">
          <h1 class="ideal">YOUR IDEAL VENUE</h1>
          <h2>What is the name of your band?</h2>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item lines="none" type="text" class="box">
            <ion-input formControlName="band"></ion-input>
          </ion-item>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="12" size-sm="8" offset-sm="2">
          <h2>What type of venue are you looking for?</h2>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-list>
            <ion-item *ngFor="let venType of venType">
              <ion-label>{{ venType.name }}</ion-label>
              <ion-checkbox formControlName="type" slot="start" [(ngModel)]="venType.isChecked" ></ion-checkbox>
            </ion-item>
          </ion-list>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</ion-content>

<ion-footer lines="none">
  <ion-grid class="ion-padding">
    <ion-row>
      <ion-col size="12" size-sm="8" offset-sm="2" class="ion-text-center">
        <ion-button
        (click)="onCreateArtist()"
        [disabled]="!aForm.valid"
        routerLink="/tabs/tab1/discover/new-artist/music-location"
          >Next</ion-button
        >
        <ion-button
          expand="block"
          fill="clear"
          routerLink="/tabs/tab1/discover/new-artist"
          routerDirection="backward"
          >Back</ion-button
        >
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>

Upvotes: 0

Views: 1237

Answers (1)

Alexis Deprez
Alexis Deprez

Reputation: 575

Here is a few options to build a multi-step form :

  • Keep all the forms on a single page, but only show the active step. You can have a step: number variable and choose the right step to display using a ngSwitch.
  • You can pass data through the navigation extra state parameter, then other pages will retrieve this data from their constructor (cf NavigationExtras#state doc), and the final page will submit it all.
  • You can pass the form data as a query parameter (transformed into base64 JSON for example)
  • You can store the data in a service.

Upvotes: 2

Related Questions