How can I check for valid promo code in my Ionic 3 Angular app against the database table?

Question

I am getting the data from the user in a new user registration screen. After clicking the register button, the data are getting saved in the database. I am using an input field called promocode, to check for the user's promo code. Here's what I need:

I am having a set of promocodes already in a database table. If the user types a promocode, and if the particular code exists in my database table, it can allow the user to register in my app. Suppose if the user is typing a promocode that is not in my database table, it should display toast message as invalid promocode and so that the user is not allowed to register. This promocode validation should happened after the user fill all the details and after clicking the submit button.

Here's what I have tried so far:

In my HTML:

<ion-item>
<ion-icon name="ios-hand" class="iconstyle" item-left></ion-icon>

<ion-label color = "textcolor" floating>Reseller Promo Code</ion-label>
<ion-input type="text" class="textcolor" [(ngModel)] = "vm.promocode" formControlName = "promocode" maxlength = "15"  tabindex="2" (keyup)="moveFocus($event,query, false)" >
</ion-input>
</ion-item>

In my ts file:

import { Component } from '@angular/core';
import {IonicPage, NavController, NavParams } from 'ionic-angular';
import {SignupService} from '../../services/signup.service';
import { MessageService } from '../../services/message.service';
import { BroadCastService } from '../../services/broadcast.service';
import { isNullOrUndefined } from 'util';
import { Signup } from '../../models/signup';
import { FormGroup, FormControl, Validators, AbstractControl} from '@angular/forms';
import { LoginPage } from '../login/login';

@IonicPage()
@Component({
  selector: 'page-signup',
  templateUrl: 'signup.html',
  providers: [SignupService]
})
export class SignupPage{
formsignup: FormGroup;

submit(){


  if (this.formsignup.valid) {
    this.signupservice.savesignup(this.vm).subscribe(res=>{
      console.log(res);
      this.message.alert("Your account has been created successfully");
      this.resetForm(this.formsignup);
      this.navCtrl.push(LoginPage);
    });


  }
  else{
  this.validateFormControl(this.formsignup);
}
}

This is my service.ts file where I am posting the user details to the server and saving it in the database.

import { Injectable } from "@angular/core";
import { DataService } from "./data.service";


@Injectable()
export class SignupService {
    constructor(private dataservice: DataService) {

    }

    savesignup(formdetails:any){
        return this.dataservice.post('/api/Login/Register', formdetails);
    }
}

In my model class I have used this promocode as follows:

signup.ts:

export class Signup{
promocode: string;

Now everything is working fine. All my data are saving in the database and I can able to login with the registered account. But I don't know how to implement this functionality. I am new to Ionic.

Answer 1

You can (or "should") create your PromoService (Provider) and a method that should look something like this should work.

public GetPromo(code: string): Promise<any> { //Can be strongly typed if you want to implement a class or interface for a Promo
    var url = '/GetPromo'; //your endpoint's url.
    var args: RequestOptionsArgs = {
        method: 'GET',
        params: {
            code : code //Your parameter. You can add more properties for multiple parameters.
        }
    };

    return this.http.request(url, args).map(res => res.json()).toPromise();
}

For post requests, parameters are attached to body .

var args: RequestOptionsArgs = {
    method: 'POST',
    body: {
        code : code //Your parameter. You can add more properties for multiple parameters.
    }
};