1
\$\begingroup\$

I have a form that I have broken into several different components in Angular. By the end of the form, all the data needs to be submitted together.

My thought process was to create a provider to handle/save the form data and at the end of the form, use the provider to package it up so it can be sent to an API. I have two examples of my form components below. In total there are 6 components.

This code works, but I feel I am not utilizing angular in the best possible way. Any suggestions/criticisms are greatly appreciated.

Form Data Provider

import { Injectable } from '@angular/core';

interface membershipType {
  membershipId: number
}

interface primaryMember {
  firstName: string,
  lastName: string,
  phoneNumber: number,
  address: string,
  city: string,
  state: string,
  zip: number
}

@Injectable()
export class MembershipFormProvider {

membershipTypeData: membershipType;
primaryMemberData: primaryMember

constructor() {

}

setMembershipType(formData: membershipType){
    this.membershipTypeData = formData;
}

getMembershipType(){
    return this.membershipTypeData;
}

setPrimaryMember(formData: primaryMember){
    this.primaryMemberData = formData;
}

getPrimaryMember(){
    return this.primaryMemberData;
}

}

First Form Component

.ts File

import { MembershipFormProvider } from '../../providers/membership-form/membership-form';

@IonicPage({
    name: 'register-membership-type',
    defaultHistory: ['sign-in']
})
@Component({
  selector: 'page-register-membership-type',
  templateUrl: 'register-membership-type.html',
})
export class RegisterMembershipTypePage {

selectedPlan: number = 1;

constructor(
  public navCtrl: NavController, 
  public navParams: NavParams,
  private formData: MembershipFormProvider) {
}

selectPlan(plan: number){
    this.selectedPlan = plan;
}

submitData(){
  let membershipType = {
    'membershipId' : this.selectedPlan
  }

  this.formData.setMembershipType(membershipType);
  this.navCtrl.push('register-primary-member');
}

.html file

<ion-header no-border>

  <ion-navbar color="primary">

  </ion-navbar>

</ion-header>

<ion-content >
    <div padding-left class="header-content">
        <h1>Register</h1>
        <p>We offer different membership plans, which one works best for you?</p>
    </div>

    <ion-list>
      <ion-item padding-vertical (click)="selectPlan(1)">
        <ion-icon *ngIf="selectedPlan == 1" item-start name="checkmark-circle-outline"></ion-icon>
        <h2>Individual Membership</h2>
        <p>1 Adult, 16 years or older</p>
        <p item-end>$34.00</p>
      </ion-item>

      <ion-item padding-vertical (click)="selectPlan(2)">
        <ion-icon *ngIf="selectedPlan == 2" item-start name="checkmark-circle-outline"></ion-icon>
        <h2>Dual Membership</h2>
        <p>2 Adults or
        1 Adult and 1 Child</p>
        <p item-end>$49.00</p>
      </ion-item>

      <ion-item padding-vertical (click)="selectPlan(3)">
        <ion-icon *ngIf="selectedPlan == 3" item-start name="checkmark-circle-outline"></ion-icon>
        <h2>Family Membership</h2>
        <p>2 Adults and up to 4 Children</p>
        <p>* Additional Adult       $25.00</p>
        <p>* Additional Child       $14.00</p>
        <p item-end>$69.00</p>
      </ion-item>
    </ion-list>

    <div padding>
        <button (click)="submitData()" class="submit-button" ion-button block>Next</button>
    </div>
</ion-content>

Second Form Component

.ts File

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { MembershipFormProvider } from '../../providers/membership-form/membership-form';


@IonicPage({
    name: 'register-primary-member',
    defaultHistory: ['RegisterMembershipTypePage']
})
@Component({
  selector: 'page-register-primary-member',
  templateUrl: 'register-primary-member.html',
})
export class RegisterPrimaryMemberPage {

    constructor(
        public navCtrl: NavController, 
        public navParams: NavParams,
        private formData: MembershipFormProvider) {
    }

    submitData(firstName,lastName,phoneNumber,address,city,state, zip){

        let formData = {
            'firstName'     : firstName,
            'lastName'      : lastName,
            'phoneNumber'   : phoneNumber,
            'address'       : address,
            'city'          : city,
            'state'         : state,
            'zip'           : zip,
        };

        this.formData.setPrimaryMember(formData);
        this.navCtrl.push('register-primary-member');
    }

}

.html file

<ion-header no-border>

  <ion-navbar color="primary">

  </ion-navbar>

</ion-header>

<ion-content padding>
    <div class="header-content">
        <h1>Register</h1>
        <p>Your plan must have one primary member, please enter their information below</p>
    </div>

    <ion-list no-lines>

        <ion-item>
            <ion-label floating>First Name</ion-label>
            <ion-input [(ngModel)]="firstName"></ion-input>
        </ion-item>


        <ion-item>
            <ion-label floating>Last Name</ion-label>
            <ion-input [(ngModel)]="lastName"></ion-input>
        </ion-item>

        <ion-item>
            <ion-label floating>Phone Number</ion-label>
            <ion-input [(ngModel)]="phoneNumber"></ion-input>
        </ion-item>


        <ion-item>
            <ion-label floating>Address</ion-label>
            <ion-input [(ngModel)]="address"></ion-input>
        </ion-item>


        <ion-item>
            <ion-label floating>City</ion-label>
            <ion-input [(ngModel)]="city"></ion-input>
        </ion-item>


        <ion-item class="select">
            <ion-label floating>State</ion-label>
            <ion-select [(ngModel)]="state" interface="popover">
                <ion-option value="sc">SC</ion-option>
                <ion-option value="al">AL</ion-option>
            </ion-select>
        </ion-item>


        <ion-item>
            <ion-label floating>Zip</ion-label>
            <ion-input [(ngModel)]="zip"></ion-input>
        </ion-item>

    </ion-list>

    <button (click)="submitData(firstName,lastName,phoneNumber,address,city,state, zip)" class="submit-button" ion-button block>Next</button>
</ion-content>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.