Question

我正在使用Angular2模板创建表单。

当我点击按钮时，页面会刷新。

我的验证工作正常。

当用户点击按钮时，如何停止页面刷新？

以下是我正在使用的HTML： -

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Add Employee</h3>
        {{model | json}}
        {{EName.errors | json}}
    </div>
    <div class="panel-body">  
        <form (ngSubmit)="onSubmit(empForm)" #empForm="ngForm" autocomplete="off" novalidate>

        <div class="form-group">
            <label for="EmployeeName">Employee Name</label>
            <input type="text" class="form-control" id="EmployeeName" placeholder="Employee Name" required [(ngModel)]="model.EName" name="EName" #EName="ngModel" ngControl="Ename" #EName="EName" >
            <div *ngIf="EName.touched && EName.errors" >
                <div *ngIf="EName.errors.required"  class="alert alert-danger">
                    Employee Name is required
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="Age">Age</label>
            <input type="text" class="form-control" id="Age" name="Age" placeholder="Age" [(ngModel)]="model.Age" ngControl="Age">
        </div>
        <div class="form-group">            
            <label for="Sex">Sex</label>
            <div class="d-block">
                <label class="radio-inline">
                    <input type="radio" name="sex" id="Male" value="0" (click)="model.Sex=$event.target.value"> Male
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="Female" value="1" (click)="model.Sex=$event.target.value"> Female
                </label>
            </div>
        </div>

        <div class="form-group">
            <label for="DOJ">Date of Joining</label>
            <datepicker [(ngModel)]="model.DOJ" name="DOJ"></datepicker>
        </div>

        <div class="form-group">
            <label for="Salary">Salary</label>
            <input type="text" class="form-control" id="Salary" placeholder="Salary" [(ngModel)]="model.Salary" name="Salary">
        </div>

        <div class="form-group">
            <label for="Designation">Designation</label>
            <select id="Designation" name="designation" class="form-control" required [(ngModel)]="model.Designation" name="designation" #desig="ngForm" ngControl="Designation">
                <option value="" selected>-- Select  --</option>
                <option *ngFor="let designation of designations" value="{{ designation.id }}"> 
                    {{designation.name}} 
                </option>
            </select>
            <div [hidden]="desig.valid || desig.pristine" class="alert alert-danger">
                Please select a proper designation.
            </div>
        </div>
        <button type="submit" class="btn btn-default" [disabled] ="!empForm.form.valid">Submit</button>
        </form>
    </div>
</div>

Answer 1

它会刷新，因为onSubmit处理程序中存在错误。在event.PreventDefault();：

中使用onSubmit

 <form (ngSubmit)="onSubmit(empForm, $event)" ... >


public onSubmit(empForm: any, event: Event) {
  event.preventDefault();
  .... rest of your code
}

您也可以检查控制台输出以调试错误 ...确保标记preserve log选项

Answer 2

确保从包含组件的模块中的 @ angular / forms 导入 FormsModule ，因为如果没有它，您提交的表单将保持刷新页面并在没有记录的情况下无声地失败任何东西到控制台。

import { NgModule }           from '@angular/core';
import { CommonModule }       from '@angular/common';

/*make sure you import it here*/
import { FormsModule }        from '@angular/forms';

 @NgModule({
  /*and add it to the imports array here*/
  imports:      [ FormsModule,  CommonModule],
  declarations: [ YourFormComponent ],
  exports:      [],
  providers:    [],
})

export class FeatureModule{ }

Answer 3

改为使用：

<button type="button"

重新加载是由浏览器的默认提交行为引起的。

Answer 4

这有效并阻止了整个页面的重新加载：

我将按钮类型从“提交”更改为“按钮”
我在按钮道具内部引入了（click）= submitValues() 这个：

提交

这阻止了页面的重新加载，希望对您有所帮助。

Answer 5

更新2019/2018- 如果您在任何最新版本的Angular（我当前使用的是7）上都遇到了这种情况，那实际上不是由于<button type="submit"...>造成的，那很好，您可以保留该设置。您还可以在(submit)元素上保留<form>事件。
您可能在其他地方出现错误，导致Angular无法按预期方式运行。

如果您使用反应式表单，请确保已包含FormsModule或ReactiveFormsModule。
请确保您的控制台没有错误（单击f12，然后导航至Console）

如果您正确实例化了表单，Angular将不会刷新页面。

Answer 6

以Angular 2形式刷新页面：

将按钮类型从“提交” 更改为按钮，无法反映任何变化。

解决方案：

表单模块必须导入到您的相应模块中。因为没有表单模块的《表单》，请视为html表单。这样该表单就可以刷新。

<form (submit)="onSubmit()">
   <input type="text" name="firstName"/>
   <button type="submit">submit</button>
</form>

带有 submit 的

类型按钮只能触发 onsubmit（）

表单

Answer 7

我也遇到了同样的问题，在提交反应式表单后，页面已重新加载。
我发现我已经使用'='将值赋给了反应形式控件。
我使用setValue()更改了工作分配，并解决了我的问题：

this.formName.controls.fieldName.setValue(value);

Answer 8

您应该在“ app.module.ts”上导入FormsModule。像这样：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports:[ FormsModule ]

关于上的操作（单击），存在一个问题，因为如果用户多次单击按钮一次，您的代码将在API和数据库中提交相同的时间。我认为最好仅在表单验证完成后才在提交时使用action（ngSubmit）。

Answer 9

onSubmit中onSubmit处理程序中的用户：

<form id="..." (ngSubmit)="onSubmit($event)" ... >

public onSubmit(event: Event) {
  .... rest of your code
}

Answer 10

我通过使用

解决了这个问题

<button type="button">Submit</button>

代替

<button type="submit">Submit</button>

提交关键字负责页面刷新。

ngSubmit以Angular 2格式刷新页面

10 个答案: