so i have been using form validators on my register page … so when i run on browser using ionic serve the validators wont work on first launch unless i refresh the page once and then they start working . the same thing is happening on the build apk as well and over their i can not refresh even restarting the app wont help over their what can be the issue ?
my register page html code
<ion-header>
<ion-toolbar color="primary">
<ion-title>Register</ion-title>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<form class="form" [formGroup]="validations_form" (ngSubmit)="tryRegister(validations_form.value)">
<ion-item>
<ion-label position="floating" color="primary">Email</ion-label>
<ion-input type="text" formControlName="email"></ion-input>
</ion-item>
<div class="validation-errors">
<ng-container *ngFor="let validation of validation_messages.email">
<div class="error-message" *ngIf="validations_form.get('email').hasError(validation.type) && (validations_form.get('email').dirty || validations_form.get('email').touched)">
{{ validation.message }}
</div>
</ng-container>
</div>
<ion-item>
<ion-label position="floating" color="primary">Password</ion-label>
<ion-input type="password" formControlName="password" class="form-controll" required></ion-input>
</ion-item>
<div class="validation-errors">
<ng-container *ngFor="let validation of validation_messages.password">
<div class="error-message" *ngIf="validations_form.get('password').hasError(validation.type) && (validations_form.get('password').dirty || validations_form.get('password').touched)">
{{ validation.message }}
</div>
</ng-container>
</div>
<ion-item>
<ion-label position="floating" color="primary">Name</ion-label>
<ion-input type="text" formControlName="name" class="form-controll" required></ion-input>
</ion-item>
<div class="validation-errors">
<ng-container *ngFor="let validation of validation_messages.name">
<div class="error-message" *ngIf="validations_form.get('name').hasError(validation.type) && (validations_form.get('name').dirty || validations_form.get('name').touched)">
{{ validation.message }}
</div>
</ng-container>
</div>
<ion-item><ion-label position="floating" color="primary">Age</ion-label>
<ion-input type="tel" formControlName="age" class="form-controll" required></ion-input>
</ion-item>
<div class="validation-errors">
<ng-container *ngFor="let validation of validation_messages.age">
<div class="error-message" *ngIf="validations_form.get('age').hasError(validation.type) && (validations_form.get('age').dirty || validations_form.get('age').touched)">
{{ validation.message }}
</div>
</ng-container>
</div>
<ion-item><ion-label position="floating" color="primary">Mobile Number</ion-label>
<ion-input type="tel" formControlName="mobilenumber" class="form-controll" required></ion-input>
</ion-item>
<div class="validation-errors">
<ng-container *ngFor="let validation of validation_messages.mobilenumber">
<div class="error-message" *ngIf="validations_form.get('mobilenumber').hasError(validation.type) && (validations_form.get('mobilenumber').dirty || validations_form.get('mobilenumber').touched)">
{{ validation.message }}
</div>
</ng-container>
</div>
<ion-item><ion-label position="floating" color="primary">Address</ion-label>
<ion-input type="text" formControlName="address" class="form-controll" required></ion-input>
</ion-item>
<div class="validation-errors">
<ng-container *ngFor="let validation of validation_messages.address">
<div class="error-message" *ngIf="validations_form.get('address').hasError(validation.type) && (validations_form.get('address').dirty || validations_form.get('address').touched)">
{{ validation.message }}
</div>
</ng-container>
</div>
<ion-button class="submit-btn" type="submit" [disabled]="!validations_form.valid">Register</ion-button>
<label class="error-message">{{errorMessage}}</label>
<label class="success-message">{{successMessage}}</label>
</form>
<p class="go-to-login">Already have an account? <a (click)="goLoginPage()">Try to Log In.</a></p>
</ion-content>
My register.page.ts code
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { AuthenticationService } from './../authentication.service';
import { NavController, MenuController } from '@ionic/angular';
import { ServiceService } from '../service.service';
@Component({
selector: 'app-register',
templateUrl: './register.page.html',
styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {
validations_form: FormGroup;
errorMessage: string = '';
successMessage: string = '';
users: any;
userName: string;
userAge: any;
userAddress: string;
usermobileNumber: any;
userEmail : any;
data : any = {};
validation_messages = {
'email': [
{ type: 'required', message: 'Email is required.' },
{ type: 'pattern', message: 'Enter a valid email.' }
],
'password': [
{ type: 'required', message: 'Password is required.' },
{ type: 'minlength', message: 'Password must be at least 5 characters long.' }
],
'age': [
{ type: 'required', message: 'Age is required.' },
{ type: 'minlength', message: 'Age must be at least 1 characters long.' }
],
'mobilenumber': [
{ type: 'required', message: 'Mobile Number is required.' },
{ type: 'minlength', message: 'Mobile Number must be at least 10 characters long.' }
],
'address': [
{ type: 'required', message: 'Address is required.' },
],
'name': [
{ type: 'required', message: 'Name is required.' },
]
};
constructor(
private navCtrl: NavController,
private authService: AuthenticationService,
private formBuilder: FormBuilder,
public menuCtrl: MenuController,
public service: ServiceService
) {
// this.menuCtrl.enable(false);
}
ngOnInit(){
this.validations_form = this.formBuilder.group({
email: new FormControl('', Validators.compose([
Validators.required,
Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
])),
password: new FormControl('', Validators.compose([
Validators.minLength(5),
Validators.required
])),
name: new FormControl('', Validators.compose([
Validators.required
])),
mobilenumber: new FormControl ('', Validators.compose([
Validators.required,
Validators.minLength(10),
Validators.maxLength(10)
])),
age: new FormControl ('', Validators.compose([
Validators.required,
Validators.minLength(1)
]))
,
address: new FormControl ('', Validators.compose([
Validators.required,
]))
});
}
tryRegister(value){
this.data = {};
this.data['Name'] = this.validations_form.value.name;
this.data['Age'] = this.validations_form.value.age;
this.data['Address'] = this.validations_form.value.address;
this.data['MobileNumber'] = this.validations_form.value.mobilenumber;
this.data['Email'] = this.validations_form.value.email;
this.menuCtrl.enable(true);
this.authService.registerUser(value,this.data)
.then(res => {
console.log(res);
this.errorMessage = "";
this.successMessage = "Your account has been created. Please log in.";
}, err => {
console.log(err);
this.errorMessage = err.message;
this.successMessage = "";
})
}
goLoginPage(){
this.navCtrl.navigateBack('');
}
}