Encountering an issue with the register page in my IONIC app.
Currently, I am utilizing a data.json file to store all user data, and I aim to create a new member with minimal information required (name, email, password) while leaving other fields empty for now.
The problem lies in the arrayPush method where certain properties are missing (the ones intended to be left blank).
This is the TypeScript code:
import {Component, Input, AfterViewInit, Output, OnInit} from '@angular/core';
import { async } from '@angular/core/testing';
import { Router } from '@angular/router';
import {AlertController, ModalController, NavParams} from '@ionic/angular';
import data from '../../../../data.json';
@Component({
selector: 'app-register',
templateUrl: './register.page.html',
styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {
@Input() fullName = '';
@Input() email = '';
@Input() password = '';
@Input() repeatPassword = '';
messageString: string;
today = new Date();
constructor(private router: Router, private alertController: AlertController) {}
ngOnInit() {}
onRegister() {
// Fetch HTML input data and validate. Show alert if invalid.
if (this.fullName === '') {this.messageString = "You didn't enter a name.";this.errorMessage();return;}
if (this.email === '') {this.messageString = "You didn't enter an email address.";this.errorMessage();return;}
if (this.password === '') {this.messageString = "You didn't enter a password.";this.errorMessage();return;}
if (this.password != this.repeatPassword) {this.messageString = "The passwords don't match.";this.errorMessage();return;}
var firstname = this.fullName.split(" ")[0];
var lastname = this.fullName.split(" ").pop();
// Save data to JSON
(data).members.push({
fullname: this.fullName,
firstname: firstname,
lastname: lastname,
mail: this.email,
password: this.password,
});
// Redirect to homepage
this.router.navigateByUrl('/home').then(r => {});
}
// Display error alert when emails do not match
async errorMessage() {
const alert = await this.alertController.create({
cssClass: 'alerts',
header: 'ERROR',
message: this.messageString,
buttons: [
{
text: 'Okay',
cssClass: 'yes'
}
]
});
await alert.present();
}
}
This represents my data.json content:
{
"members": [
{
"id": 1,
"gender": "0",
"fullname": "X X",
"firstname": "X",
"infix": "",
"lastname": "X",
"number": "06-12345678",
"mail": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cabfb9afb88aa9a5a7baaba4b3e4a9a5a7">[email protected]</a>",
"image": "https://pbs.twimg.com/media/EHMN4bVWoAUXhUz.jpg",
"password": "admin1",
"birthdate": "14-07-2001",
"country": "Netherlands",
"address": "Testweg 1a",
"state": "Noord Holland",
"city": "Amsterdam",
"zip": "1234BC",
"subscription": "26 Dec. 2020"
}
]
}
I intend to fill only these JSON objects for a new user: fullname, firstname, lastname, email, password