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>

구성 요소가 포함된 모듈의 @angular/forms에서 FormsModule을 가져오는지 확인하십시오. 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{ }

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

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


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

또한 오류를 디버깅하기 위해 콘솔 출력을 확인할 수 있습니다. 반드시 표시해야 합니다.preserve log선택

대신 사용:

<button type="button"

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

2019/2018 업데이트 - Angular의 최근 버전에서 이러한 일이 발생하고 있다면(나는 현재 7에 있습니다), 그것은 다음 때문이 아닙니다.<button type="submit"...>사실, 그것은 완벽하게 괜찮습니다, 당신은 그것을 유지할 수 있습니다.또한 다음을 유지할 수 있습니다.(submit)당신의 이벤트<form>원소의
Angular가 의도한 대로 작동하지 않는 다른 곳에 오류가 있을 수 있습니다.

• 다음을 포함했는지 확인하십시오.FormsModule또는ReactiveFormsModule반응형을 사용하는 경우.
• 콘솔에 오류가 없는지 확인하십시오(f12를 클릭한 후 다음으로 이동).Console)

양식을 올바르게 인스턴스화한 경우 각도는 페이지를 새로 고치지 않습니다.

이렇게 하면 전체 페이지가 다시 로드되지 않습니다.

1. 버튼 유형을 "제출"에서 "버튼"으로 변경했습니다.

2. (클릭)=를 소개했습니다.submitValues()다음과 같은 버튼 소품 내부:

   제출하다

페이지를 다시 로드하지 못했습니다. 도움이 되었으면 합니다.

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

단추 유형을 "제출"에서 단추로 변경하면 변경 내용을 반영할 수 없습니다.

솔루션:

폼 모듈을 해당 모듈로 가져와야 합니다.폼 모듈이 없는 <form>이기 때문에 html 형식으로 간주합니다.그래서 그 형태는 새로워집니다.

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

제출 시에만 양식을 트리거할 수 있는 제출 단추 유형()

"app.module.ts"에서 FormsModule을 가져와야 합니다.다음과 같이:

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

@NgModule({
  imports:[ FormsModule ]

에 대한 작업(클릭)과 관련하여, 사용자가 버튼을 두 번 이상 클릭하면 API와 데이터베이스에서 코드가 동일한 시간에 제출되기 때문에 문제가 있습니다.양식의 유효성 확인이 완료된 경우에만 제출을 위해 에서 조치(ngSubmit)를 사용하는 것이 좋다고 생각합니다.

저는 같은 문제에 직면하고 있었습니다. 제 반응 양식을 제출했을 때 페이지가 다시 로드되었습니다.
저는 '='을 사용하여 반응형 폼 컨트롤에 값을 할당했습니다.
는 다을사용과변다니습경했제를을 사용하여 과제를 했습니다.setValue()그리고 그것은 제 문제를 해결했습니다.

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

저도 마찬가지로 페이지 모듈에 페이지를 선언하지 않았습니다. 페이지 모듈에 페이지를 선언한 후 문제가 해결되었습니다.

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

import { FormPage } from './formPage';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
 declarations: [FormPage]

onSubmit의 onSubmit 핸들러에 있는 사용자:

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

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

저는 이 문제를 사용하여 해결합니다.

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

대신에

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

submit 키워드는 페이지 새로 고침을 담당합니다.

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