Angular Forms 无法在实时服务器上运行 [英] Angular Forms not working on live server

查看：31
本文介绍了Angular Forms 无法在实时服务器上运行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

**我使用了 Reactive Form，但它不能在现场工作，但在本地工作正常.提交表单时页面会刷新.控制台没有错误.**

我是 Angular 4 的新手，任何帮助将不胜感激.

功能如下:

注册.html

<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))">请输入您的名字</跨度><span *ngIf="maxlength==25">最大字符数应为 25</span>

<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))">请输入您的姓氏</跨度>

<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))">请输入您的电子邮件</跨度><span class="for-signuperror" *ngIf="sign_up_errors.email">{{sign_up_errors.email[0]}}</span><span class="help-inline error risk for-signuperror " *ngIf="sign_up_errors.email">{{sign_up_errors.email}}</span>

<div class="form-group"><input formControlName="password" type="password" #passwordEye class="form-control" placeholder="密码"><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))">请输入您的密码</跨度><span class="help-inline error risk for-signuperror" *ngIf="sign_up_errors.password">{{sign_up_errors.password[0]}}</span>

<button type="submit" class="btn btn-primary">注册</button></表单>

signup.component.ts

import { Component, OnInit } from '@angular/core';从@angular/router"导入{路由器}；从@angular/forms"导入 { FormGroup, FormControl, Validators, FormBuilder };从'ng2-validation'导入{CustomValidators}；从 '../service/api.service' 导入 { ApiService };从 './../service/share.service' 导入 { ShareService };//从'jquery'导入*为jQuery；//声明 var jQuery:any;@成分({选择器:'应用程序注册'，templateUrl: './signup.component.html',styleUrls: ['./signup.component.css'],提供者:[ApiService]})导出类 SignupComponent 实现 OnInit {注册用户:FormGroup；isProcessing:boolean = false;signUpFormTouched: boolean = false;sign_up_errors:any;对话标题:字符串；对话消息:字符串；showDialog:boolean = false;电子邮件:字符串；名字:字符串；姓氏:字符串；密码:字符串；位置:字符串；错误:字符串；错误:任何；可见:任何；最大长度:数量；构造函数(私有路由器:路由器，fb:FormBuilder，私有 apiService:ApiService，私人共享服务:共享服务){this.signupuser = fb.group({"email": ["", Validators.compose([Validators.required,CustomValidators.email])],"密码": ["", Validators.required],"first_name" : ["", Validators.required, Validators.pattern('^[a-zA-Z \-\']+')],"last_name" : ["", Validators.required]});this.sign_up_errors = {电子邮件": ""，密码": ""};}显示密码(密码眼:任何){passwordEye.type = passwordEye.type === '密码' ?'文本':'密码';}ngOnInit() {}onClose($event){this.router.navigate(['/login']);}注册(注册用户){//console.log(signupuser.value);this.signUpFormTouched = true;如果(注册用户.无效){返回;}让 post_data:any = signupuser.value;如果(！post_data.access_code_selected){post_data.access_token = "";}this.isProcessing = true;this.apiService.post('auth/signup',post_data).then( (数据) => {this.signupuser.reset();this.showDialog = true;this.dialog_title = "请检查您的电子邮件收件箱";this.dialog_message = "我们已经给您发送了一封电子邮件来验证您的帐户.";this.isProcessing = false;}).catch((res) => {this.isProcessing = false;if(typeof res.error != 'undefined'){this.sign_up_errors = res.error.errors;}/*别的{this.sign_up_errors = [res.error.message];}*/});}}

package.json

<代码>{"name": "ng",版本":0.0.0"，"许可证": "麻省理工学院",脚本":{"ng": "ng","start": "webpack-dev-server --port=4200","build": "webpack","test": "karma start ./karma.conf.js","lint": "ng lint","e2e": "量角器 ./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 运行 compile_@agm_core"},私人":真的，依赖关系":{"@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-b​​rowser": "^5.0.1","@angular/platform-b​​rowser-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","打字稿": "^2.6.1",zone.js":^0.8.14"},开发依赖":{"@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",量角器":~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","打字稿": "^2.4.2","autoprefixer": "^6.5.3","css-loader": "^0.28.1","cssnano": "^3.10.0","exports-loader": "^0.6.3","文件加载器": "^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",循环依赖插件":^3.0.0"}}

谢谢.

解决方案

当您在论坛下放置按钮时，只需选择按钮类型为 button 而不是上述代码的 submit.

如果你没有声明一个类型，你必须声明一个类型为 button 因为没有指定 type 属性的 button 元素表示与 type 属性设置为 submit 的 button 元素相同的东西.

希望它有效！

**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.

解决方案 

<button class="btn btn-success" type="button" (click)="onAdd()">Add</button>

when you put a button under the forum just select the Button Type as button instead of submit as above code.

If you did not declare a type you must declare a type as button because button element with no type attribute specified represents the same thing as a button element with its type attribute set to submit.

Hope it WORKS!

这篇关于Angular Forms 无法在实时服务器上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆