Angular2가 버튼을 클릭할 때 양식을 체계적으로 제출하지 않도록 합니다.

Angular2가 버튼을 클릭할 때 양식을 체계적으로 제출하지 않도록 합니다.

좋아요, 그래서 이것은 분명하지 않을 수 있습니다.다음 양식 가져오기:

<form (ngSubmit)="submit()" #crisisForm="ngForm">
   <input type="text" name="name" [(ngModel)]="crisis.name">
   <button type="submit">Submit</button>
   <button type="button" (click)="preview()">Preview</button>
   <button type="reset" (click)="reset()">Reset</button>
</form>

모든 버튼이 트리거되는 이유는 무엇입니까?submit()기능?어떻게 하면 피할 수 있을까요?

두 가지 방법으로 해결할 수 있습니다.

type="button"을 명시적으로 지정합니다(더 바람직하다고 생각합니다).

<button type="button" (click)="preview();">Preview</button>

W3 사양에 따름:

• http://w3c.github.io/html-reference/button.html

  형식 특성이 지정되지 않은 단추 요소는 형식 특성이 "제출"로 설정된 단추 요소와 동일한 것을 나타냅니다.

사용$event.preventDefault():

<button (click)="preview(); $event.preventDefault()">Preview</button>

또는

<button (click)="preview($event);">Preview</button>

preview(e){
  e.preventDefault();
  console.log('preview')
}

이 플런커는 그렇지 않으면 모든 버튼이 의도한 대로 작동하는 것 같다고 제안합니다.

그러나 양식의 기본 동작을 방지하기 위해 이 작업을 수행할 수 있습니다.

---

TS:

submit(e){
 e.preventDefault();
}

템플릿:

<form (submit)="submit($event)" #crisisForm="ngForm">

app.module.ts의 '@angular/forms'에서 FormsModule을 가져와야 합니다.

import { FormsModule } from '@angular/forms';
 @NgModule({
  imports: [
    FormsModule
 ],
 })

2.0 릴리즈에서는(ngSubmit)a를 통과하는 중입니다.null메소드에 대한 이벤트 값을 입력해야 합니다.(submit)

<form (submit)="submit($event)" #crisisForm="ngForm">

.ts 파일

submit($event){
   /* form code */
   $event.preventDefault();
}

제출을 실행하지 않을 버튼에 type="button"을 설정합니다.

저도 같은 문제가 있어요.내가 찾은 주변의 일은 대체품이었습니다.button와 함께a앵커 요소에 단추 스타일을 적용합니다.

<form (ngSubmit)="submit()" #crisisForm="ngForm">
   <input type="text" name="name" [(ngModel)]="crisis.name">
   <button type="submit">Submit</button>
   <a class="btn" (click)="preview()">Preview</a>
   <a class="btn" (click)="reset()">Reset</a>
</form>

Angular는 이를 위한 내장 솔루션을 제공합니다.당신은 단지 그것을 교체하기만 하면 됩니다.(submit)="handleSubmit()"와 함께(ngSubmit)="handleSubmit()"이렇게 함으로써e.preventDefault()후드 아래의 각 자체에 의해 암시적으로 호출됩니다.

언급URL : https://stackoverflow.com/questions/38786995/avoid-angular2-to-systematically-submit-form-on-button-click