Angular Forms在实时服务器上不起作用 [英] Angular Forms not working on live server
本文介绍了Angular Forms在实时服务器上不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
**我已经使用了Reactive Form，但是它不能实时运行，但是在本地运行良好.提交表单时页面会刷新.控制台中没有错误. **
**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. **
我是Angular 4的新手，我们将不胜感激.
I am new to Angular 4, any help will be highly appreciated.
功能如下:
signup.html
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
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
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"
}
}
谢谢.
推荐答案
我发现其他人也遇到同样的问题， 可能该解决方案将为您服务
I have find out same problems to others, Might be this solution will work for you
1-将uglify-es@3.2.2添加到package.json中的依赖项数组
1 - add uglify-es@3.2.2 to dependencies array in package.json
2-删除node_modules和dist
2 - delete node_modules and dist
3-npm安装
这篇关于Angular Forms在实时服务器上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
