ngSubmit은 Angular 2 형식으로 페이지를 새로 고칩니다.

ngSubmit은 Angular 2 형식으로 페이지를 새로 고칩니다.

---

양식을 만들기 위해 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>

---

에 오류가 있기 때문에 새로 고쳐 onSubmit사용 .. 핸들러 event.PreventDefault();에서 onSubmit:

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


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

또한 콘솔 출력을 확인하여 오류를 디버그 할 수 있습니다. preserve log옵션 을 표시했는지 확인하십시오.

---

당신이 가져 확인 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{ }

---

대신 사용 :

<button type="button"

다시로드는 브라우저의 기본 제출 동작으로 인해 발생합니다.

---

Update 2019/2018 - If this is happening to you on any recent version of Angular (I'm currently on 7), it's not due to a <button type="submit"...>, in-fact, that's perfectly fine, you can keep that. You can also keep the (submit) event on your <form> element.
You likely have an error somewhere else which is causing Angular to not act as intended.

• Please make sure you have included the FormsModule or ReactiveFormsModule if you're using reactive forms.
• Please make sure you don't have errors in your console (click f12 then navigate to Console)

Angular will not refresh the page if you have properly instantiated your Form.

---

Refreshes the page in Angular 2 form:

Change button type from "submit" to button, no change can reflect.

Solution:

form module has to imported in your corresponding module. Because <form> without form module, consider as html form.So that form gets refresh.

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

Button type with submit only able to trigger the form onsubmit()

참고URL : https://stackoverflow.com/questions/39203428/ngsubmit-refreshes-the-page-in-angular-2-form