**我使用了Reactive Form，但它没有在现场工作，但在当地工作正常。提交表单时页面会刷新。控制台中没有错误。 **
我是Angular 4的新手，任何帮助都将受到高度赞赏。
功能如下：
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"
}
}
谢谢。
我发现其他人也有同样的问题，这个解决方案可能适合你
1 - 将[email protected]添加到package.json中的依赖项数组
2 - 删除node_modules和dist
3 - npm安装