Angular 2 : 양식이 연결되지 않았기 때문에 양식 제출이 취소되었습니다.

양식이 포함 된 모달이 있는데, 모달이 파괴되면 콘솔에 다음 오류가 발생합니다.

양식이 연결되지 않아 양식 제출이 취소되었습니다.

모달은 내 최상위 요소 인에 <modal-placeholder>직접 자식 인 요소에 추가됩니다 <app-root>.

DOM에서 양식을 제거하고 Angular 2에서이 오류를 제거하는 올바른 방법은 무엇입니까? 나는 현재componentRef.destroy();

다른 이유가있을 수 있지만 제 경우에는 브라우저에서 제출 버튼으로 해석 한 버튼이있어서 버튼을 클릭했을 때 양식이 제출되어 오류가 발생했습니다. type = "button"을 추가하면 문제가 해결되었습니다. 전체 요소 :

    <button type="button" (click)="submitForm()">

양식 태그에 다음을 작성해야합니다.

 <form #myForm="ngForm" (ngSubmit)="onSubmit()">

양식 안에 제출 버튼이 있어야합니다.

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

그리고 가장 중요한 것은 양식에 다른 버튼이있는 경우 추가해야한다는 type="button"것입니다. 기본 type속성 (내 생각에는 submit)을 그대로 두면 경고 메시지가 표시됩니다.

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

그래서 나는 모달을 사용하지 않는 것을 제외하고는 실제로 똑같은 문제에 직면했습니다. 내 양식에는 두 개의 버튼이 있습니다. 양식을 제출하는 하나와 클릭하면 이전 페이지로 다시 라우팅되는 하나.

<button class="btn btn-default" routerLink="/events">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>

routerLink로 첫 번째 버튼을 클릭하면 예상대로 정확히 양식을 제출하려고 시도한 다음 양식이있는 페이지가 제출 중에 DOM에서 마운트 해제되기 때문에 양식 제출을 포기해야합니다.

이것은 전체 페이지가 아닌 모달을 제외하고는 당신에게 일어나는 것과 똑같은 일로 보입니다.

두 번째 버튼의 유형을 제출 이외의 것으로 직접 지정하면 문제가 해결됩니다.

<button type="button "class="btn btn-default" routerLink="/events">Cancel</button>

따라서 '취소'버튼 또는 이와 유사한 것을 통해 모달을 닫는 경우 위에 표시된대로 해당 버튼의 유형을 지정하면 문제가 해결됩니다.

양식 요소에서 다음과 같이 제출 방법 (ngSubmit)을 정의해야합니다. <form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">

이제 양식이 제출 방법에 연결되었으므로 제출 단추에서 클릭 방법을 생략합니다 <button class="btn btn-success" type="submit">Save</button>. 단추는 제출 유형이어야합니다.

컴포넌트 뒤에있는 코드에서 "onSubmit"메소드를 구현합니다. 예를 들어 다음과 같습니다. onSubmit(value: ICurrency) { ... } 이 메소드는 양식 필드에서 값이있는 값 객체를 수신합니다.

Form 제출이 컴포넌트의 파괴를 수반하는 경우 Form 제출은 DOM에서 Form을 분리하여 경쟁 조건에서 실패합니다. 말해, 우리는

submitForm() {
  if (this.myForm.invalid) {
    return;
  }
  this.saveData(); // processing Form data
  this.abandonForm(); // change route, close modal, partial template ngIf-destroying etc
}

saveData비동기 인 경우 (예 : API 호출을 통해 데이터 저장) 결과를 기다릴 수 있습니다.

submitForm() {
  this.saveDataAsync().subscribe(
    () => this.abandonForm(),
    (err) => this.processError(err) // may include abandonForm() call
  );
}

양식을 즉시 포기해야하는 경우 지연없는 접근 방식도 작동합니다. 이렇게하면 양식 제출이 호출 된 후 DOM 분리가 다음 이벤트 루프에있게됩니다.

submitForm() {
  this.saveData();
  setTimeout(() => this.abandonForm());
}

이것은 버튼 유형에 관계없이 작동합니다.

나는 최근 에이 문제가 있었고 event.preventDefault()나를 위해 일했습니다. 클릭 이벤트 메소드에 추가하십시오.

<button type="submit" (click)="submitForm($event)" mat-raised-button>Save</button>

과:

submitForm(event: Event) {
  event.preventDefault();
  // ...
}

제출 버튼이 전혀 없어도 Angular 6에서 이것을 볼 수 있습니다. 동일한 템플릿에 여러 양식이있을 때 발생합니다. 해결책이 있는지 / 해결책이 무엇인지 확실하지 않습니다.

이 경고를 받았는데, 버튼 유형 "제출"을 "버튼"문제로 변경했습니다.

단추의 기능을 "제출"유형으로 유지하려면 해당 단추에 대한 클릭 이벤트를 사용하지 않아야합니다. 대신 양식에서 ngSubmit 이벤트를 사용해야합니다.

예:

<form (ngSubmit)="destroyComponent()">
<button type="submit">submit</button>
</form>

양식 제출의 다른 페이지로 라우팅 할 수 있습니다. routerlink템플릿으로 전달하는 대신 다음 예제와 같이 프로그래밍 방식 경로 탐색을 사용합니다 .

router.navigate(['/your/router/path'])