Question

我的表格看起来像

<form (ngSubmit)="onSubmit(myForm)" 
      #myForm="ngForm">
  <mat-form-field>
    <input matInput placeholder="Field" [(ngModel)]="field" name="field">
  </mat-form-field>
  <button mat-raised-button color="primary">Submit</button>
</form>

我在我的模块中导入FormsModule，当代码构建用于开发时，一切都按预期工作。当我为生产构建项目时，页面重新加载并且没有提供控制台日志。

我尝试向提交处理程序提供$event并明确停止默认行为（据我所知，ngSubmit应该隐式处理），但这没有帮助。< / p>

包版本如下

+-- @angular/animations@5.1.2
+-- @angular/cdk@5.0.2
+-- @angular/cli@1.6.1
+-- @angular/common@5.1.2
+-- @angular/compiler@5.1.2
+-- @angular/compiler-cli@5.1.2
+-- @angular/core@5.1.2
+-- @angular/flex-layout@2.0.0-beta.12
+-- @angular/forms@5.1.2
+-- @angular/http@5.1.2
+-- @angular/language-service@5.1.2
+-- @angular/material@5.0.2
+-- @angular/platform-browser@5.1.2
+-- @angular/platform-browser-dynamic@5.1.2
+-- @angular/router@5.1.2
+-- @types/jasmine@2.5.54
+-- @types/jasminewd2@2.0.3
+-- @types/node@6.0.95
+-- codelyzer@4.0.2
+-- core-js@2.5.3
+-- jasmine-core@2.6.4
+-- jasmine-spec-reporter@4.1.1
+-- karma@1.7.1
+-- karma-chrome-launcher@2.1.1
+-- karma-cli@1.0.1
+-- karma-coverage-istanbul-reporter@1.3.1
+-- karma-jasmine@1.1.1
+-- karma-jasmine-html-reporter@0.2.2
+-- protractor@5.1.2
+-- rxjs@5.5.6
+-- ts-node@3.2.2
+-- tslint@5.7.0
+-- typescript@2.4.2
`-- zone.js@0.8.18

当我检查我刚刚工作的项目时，它使用了相同的代码，应用程序没有遇到这个问题。在Angular的新版本中是否应该采用不同的方式？

修改：当我在评论

中建议更改时

将按钮类型更改为button
从按钮单击

页面仍然重新加载，这是由检查表单有效性引起的。

onSubmit(form: NgForm){
  if (form.form.invalid)
    return;
}

这不是原因，因为在不进行建议更改的情况下删除有效性检查不会阻止页面重新加载。

Edit2：所以它确实似乎是一个包版本问题。以下git project演示了此问题。使用默认软件包时，问题没有发生，一旦我更新软件包就会出现。

Answer 1

我也有同样的问题。显然，已经在Angular项目下注册了一个bug。 Issue 21173

我能够按照@thekiba

进行更改

//文件：   /node_modules/@angular/cli/models/webpack-configs/production.js

-mangle：true
  + mangle：false

并运行以下命令进行构建：

ng build --prod --env=release --aot --build-optimizer true --output-hashing all --extract-css true --named-chunks false --sourcemaps false

我希望有帮助

Angular表单提交会导致页面重新加载（仅限生产）

1 个答案: