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

각도 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">

이제 양식이 제출 방법에 연결되었기 때문에 제출 버튼에서 method를 클릭하지 않습니다.<button class="btn btn-success" type="submit">Save</button>단추는 제출 유형이어야 합니다.

에서 "합니다. 를 들어, "onSubmit" "onSubmit" "onSubmit"은 다음과 . 예를 들어 다음과 같습니다.onSubmit(value: ICurrency) { ... }이 메서드는 양식 필드에서 값이 있는 값 개체를 수신하고 있습니다.

양식을 제출할 때 구성 요소가 파괴되는 경우, 양식 제출은 DOM에서 양식이 분리되는 경합 상태에서 실패합니다.이봐, 우리는.

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

한다면saveData를 들어 호출을 ) 수 . isasync(isasync(isasync) 예 그 API 터 저 결 를 과 있 습 니 다 수 릴 기 다 함 면 장 들 러 를 를 호 어 데 통출 이해 을 ▁is다니▁wait습있▁for:▁may▁resultasy▁the▁we그for▁asyncis▁(nc수▁then(▁call▁the)예▁via▁saves릴▁example▁it▁api

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

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

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

단추 유형에 관계없이 작동해야 합니다.

에 이 , 저는최이문겪었고를제에근,겪▁recently고,event.preventDefault()저를 위해 일했습니다.클릭 이벤트 방법에 추가합니다.

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

그리고:

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

는 속을추가문해제결다니습했를여 을 했습니다.type = "button".

<button type="button" onClick={props.formHandler}>Cancel</button>

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

저는 이 경고를 받고 버튼 유형을 "버튼"으로 변경하여 문제를 해결했습니다.

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

예:

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

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

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

언급URL : https://stackoverflow.com/questions/42531167/angular-2-form-submission-canceled-because-the-form-is-not-connected