버튼 클릭시 체계적으로 양식을 출시하기 위해 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()기능을 트리거하는 이유는 무엇입니까? 그리고 그것을 피하는 방법?

---

이를 해결하기위한 두 가지 옵션이 있습니다.

1) 명시 적으로 type = "button"을 지정 합니다. ( 더 정확하게 생각합니다 ).

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

W3 사양에 따르면 :

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

  A 버튼 요소 와 어떤 유형의 속성 지정은 버튼과 같은 것을 "제출"에 해당 유형의 속성 세트와 요소를 .

2) 용도 $event.preventDefault():

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

또는

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

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

---

이 Plunker 는 말은 모든 버튼이 의도하는 것처럼 보입니다.

그러나 양식의 기본 동작을 방지 할 수 있습니다.

---

TS :

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

주형 :

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

---

2.0 릴리스 (ngSubmit)에서는에서는 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>

---

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

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

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