**I have used Reactive Form but its not working on live but on local it is working fine. The page gets refreshed while submitting the form. There is no error in console. **
I am new to Angular 4, any help will be highly appreciated.
Functionality is listed below:
signup.html
<form [formGroup]="signupuser" (ngSubmit)="signup(signupuser)">
<div class="form-group">
<input formControlName="first_name" type="text" class="form-control" placeholder="First Name" maxlength="25" trim >
<span class="for-signuperror" [hidden]="!(signupuser.controls.first_name.invalid && (signupuser.controls.first_name.touched || signUpFormTouched))">Please enter your First Name</span>
<span *ngIf="maxlength==25">Maximum Character should be 25</span>
</div>
<div class="form-group">
<input formControlName="last_name" type="text" class="form-control" placeholder="Last Name" maxlength="25" trim>
<span class="for-signuperror" [hidden]="!(signupuser.controls.last_name.invalid && (signupuser.controls.last_name.touched || signUpFormTouched))">Please enter your Last Name</span>
</div>
<div class="form-group">
<input formControlName="email" type="email" class="form-control" placeholder="Email">
<span class="for-signuperror" [hidden]="!(signupuser.controls.email.invalid && (signupuser.controls.email.touched || signUpFormTouched))">Please enter your Email</span>
<span class="for-signuperror" *ngIf="sign_up_errors.email">
{{sign_up_errors.email[0]}}
</span>
<span class="help-inline error danger for-signuperror " *ngIf="sign_up_errors.email">{{sign_up_errors.email}}</span>
</div>
<div class="form-group">
<input formControlName="password" type="password" #passwordEye class="form-control" placeholder="Password">
<span><i class="fa fa-eye eyeicon" (click)="showPassword(passwordEye)"></i></span>
<span class="for-signuperror" [hidden]="!(signupuser.controls.password.invalid && (signupuser.controls.password.touched || signUpFormTouched))">Please enter your Password</span>
<span class="help-inline error danger for-signuperror" *ngIf="sign_up_errors.password">{{sign_up_errors.password[0]}}</span>
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
signup.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { CustomValidators } from 'ng2-validation';
import { ApiService } from '../service/api.service';
import { ShareService } from './../service/share.service';
//import * as jQuery from 'jquery';
// declare var jQuery:any;
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.css'],
providers: [ApiService]
})
export class SignupComponent implements OnInit {
signupuser: FormGroup;
isProcessing:boolean = false;
signUpFormTouched: boolean = false;
sign_up_errors:any;
dialog_title:string;
dialog_message:string;
showDialog:boolean = false;
email: string;
first_name: string;
last_name: string;
Password: string;
Location: string;
error: string;
errors: any;
visible:any;
maxlength: number;
constructor(private router: Router,
fb: FormBuilder,
private apiService: ApiService,
private shareService: ShareService) {
this.signupuser = fb.group({
"email": ["", Validators.compose([Validators.required,CustomValidators.email])],
"password": ["", Validators.required],
"first_name" : ["", Validators.required, Validators.pattern('^[a-zA-Z \-\']+')],
"last_name" : ["", Validators.required]
});
this.sign_up_errors = {
"email": "",
"password": ""
};
}
showPassword( passwordEye: any) {
passwordEye.type = passwordEye.type === 'password' ? 'text' : 'password';
}
ngOnInit() {
}
onClose($event){
this.router.navigate(['/login']);
}
signup(signupuser){
//console.log(signupuser.value);
this.signUpFormTouched = true;
if(signupuser.invalid){
return;
}
let post_data:any = signupuser.value;
if(!post_data.access_code_selected){
post_data.access_token = "";
}
this.isProcessing = true;
this.apiService.post('auth/signup',post_data)
.then( (data) => {
this.signupuser.reset();
this.showDialog = true;
this.dialog_title = "Please check your Email Inbox";
this.dialog_message = "We have sent you an email to verify your Account.";
this.isProcessing = false;
})
.catch((res) => {
this.isProcessing = false;
if(typeof res.error != 'undefined'){
this.sign_up_errors = res.error.errors;
}
/*else{
this.sign_up_errors = [res.error.message];
}*/
});
}
}
package.json
{
"name": "ng",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "webpack-dev-server --port=4200",
"build": "webpack",
"test": "karma start ./karma.conf.js",
"lint": "ng lint",
"e2e": "protractor ./protractor.conf.js",
"pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
"compile_@agm_core": "babel node_modules/@agm/core -d node_modules/@agm/core --presets es2015",
"postinstall": "npm run compile_@agm_core"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.0.1",
"@angular/common": "^5.0.1",
"@angular/compiler": "^5.0.1",
"@angular/compiler-cli": "^5.0.1",
"@angular/core": "^5.0.1",
"@angular/forms": "^5.0.1",
"@angular/http": "^5.0.1",
"@angular/platform-browser": "^5.0.1",
"@angular/platform-browser-dynamic": "^5.0.1",
"@angular/platform-server": "^5.0.1",
"@angular/router": "^5.0.1",
"angular2-jwt": "^0.2.3",
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "^4.0.0-beta.2",
"core-js": "^2.4.1",
"jquery": "^3.2.1",
"ng2-img-cropper": "^0.9.0",
"ng2-slim-loading-bar": "^4.0.0",
"ng2-trim-directive": "^2.1.0",
"ng2-validation": "^4.2.0",
"ngx-bootstrap": "^2.0.0-beta.11",
"popper.js": "^1.12.9",
"rxjs": "^5.5.2",
"typescript": "^2.6.1",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "^1.5.0",
"@angular/compiler-cli": "^5.0.0",
"@angular/language-service": "^5.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/jquery": "^3.2.17",
"@types/node": "~6.0.60",
"babel-preset-stage-0": "^6.24.1",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"raw-loader": "^0.5.1",
"ts-loader": "^3.2.0",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"tslint-loader": "^3.5.3",
"typescript": "^2.4.2",
"autoprefixer": "^6.5.3",
"css-loader": "^0.28.1",
"cssnano": "^3.10.0",
"exports-loader": "^0.6.3",
"file-loader": "^1.1.5",
"less-loader": "^4.0.5",
"postcss-loader": "^1.3.3",
"postcss-url": "^5.1.2",
"sass-loader": "^6.0.3",
"source-map-loader": "^0.2.0",
"istanbul-instrumenter-loader": "^2.0.0",
"style-loader": "^0.13.1",
"stylus-loader": "^3.0.1",
"url-loader": "^0.6.2",
"circular-dependency-plugin": "^3.0.0"
}
}
Thanks.
