Angular 2: Gửi biểu mẫu bị hủy vì biểu mẫu không được kết nối

Tôi có một phương thức chứa một biểu mẫu, khi phương thức bị hủy, tôi gặp lỗi sau trong bảng điều khiển:

Gửi biểu mẫu bị hủy vì biểu mẫu không được kết nối

Phương thức được thêm vào một <modal-placeholder>phần tử là phần tử con trực tiếp <app-root>, phần tử cấp cao nhất của tôi.

Cách chính xác để xóa biểu mẫu khỏi DOM và loại bỏ lỗi này trong Angular 2 là gì? Tôi hiện đang sử dụngcomponentRef.destroy();

Có thể có những lý do khác khiến điều này xảy ra nhưng trong trường hợp của tôi, tôi có một nút được trình duyệt hiểu là nút gửi và do đó biểu mẫu đã được gửi khi nút được nhấp vào gây ra lỗi. Thêm loại = "nút" đã khắc phục sự cố. Phần tử đầy đủ:

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

Trong thẻ biểu mẫu, bạn nên viết như sau:

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

và bên trong biểu mẫu, bạn nên có nút gửi:

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

Và quan trọng nhất, nếu bạn có bất kỳ nút nào khác trong biểu mẫu của mình, bạn nên thêm type="button"vào chúng. Để lại typethuộc tính mặc định (mà tôi nghĩ là submit) sẽ gây ra thông báo cảnh báo.

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

Vì vậy, tôi thực sự vừa gặp phải cùng một vấn đề ngày hôm nay ngoại trừ không có phương thức liên quan. Trong hình thức của tôi, tôi có hai nút. Một cái gửi biểu mẫu và một cái, khi được nhấp vào, sẽ định tuyến trở lại trang trước.

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

Nhấp vào nút đầu tiên với routerLink thực hiện chính xác những gì nó phải làm, nhưng dường như cũng cố gắng gửi biểu mẫu, và sau đó phải bỏ gửi biểu mẫu vì trang mà biểu mẫu đã ở trên đó không được gắn kết khỏi DOM trong quá trình gửi.

Điều này dường như giống hệt điều đang xảy ra với bạn, ngoại trừ với một phương thức thay vì toàn bộ trang.

Sự cố sẽ được khắc phục nếu bạn trực tiếp chỉ định loại nút thứ hai là thứ gì đó khác với gửi.

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

Vì vậy, nếu bạn đang đóng phương thức thông qua nút 'Hủy' hoặc thứ gì đó thuộc loại này, việc chỉ định loại nút đó, như được hiển thị ở trên, sẽ giải quyết được vấn đề của bạn.

Trong phần tử biểu mẫu, bạn cần xác định phương thức gửi (ngSubmit), giống như: <form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">

và trên nút gửi, bạn bỏ qua phương thức nhấp vì biểu mẫu của bạn hiện được kết nối với phương thức gửi: <button class="btn btn-success" type="submit">Save</button>Nút phải thuộc loại gửi.

Trong mã phía sau thành phần bạn triển khai phương thức "onSubmit", ví dụ như sau: onSubmit(value: ICurrency) { ... } Phương thức này đang nhận một đối tượng giá trị với các giá trị từ các trường biểu mẫu.

Trong trường hợp việc gửi Biểu mẫu đi kèm với việc phá hủy thành phần, thì việc gửi Biểu mẫu không thành công trong điều kiện chạy đua với việc tách Biểu mẫu khỏi DOM. Nói rằng, chúng tôi có

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

Nếu không đồng bộ saveData(ví dụ: nó lưu dữ liệu thông qua lệnh gọi API) thì chúng tôi có thể đợi kết quả:

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

Nếu bạn cần từ bỏ Biểu mẫu ngay lập tức, thì cách tiếp cận không trì hoãn cũng sẽ hoạt động. Điều này đảm bảo tách DOM sẽ ở trong vòng lặp sự kiện tiếp theo sau khi gửi Biểu mẫu đã được gọi:

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

Điều này sẽ hoạt động bất kể loại nút nào.

Tôi đã gặp vấn đề này gần đây và event.preventDefault()đã làm việc cho tôi. Thêm nó vào phương pháp sự kiện nhấp chuột của bạn.

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

Và:

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

Tôi thấy điều này trong Angular 6, ngay cả khi không có nút gửi nào cả. xảy ra khi có nhiều biểu mẫu trong cùng một mẫu. không chắc liệu có giải pháp không / giải pháp là gì.

tôi đã có cảnh báo này, tôi đã thay đổi loại nút "gửi" thành "nút" đã được giải quyết.

Nếu bạn vẫn muốn duy trì chức năng của nút thuộc loại "gửi", thì bạn không nên sử dụng sự kiện nhấp vào nút đó. Thay vào đó, bạn nên sử dụng sự kiện ngSubmit trên biểu mẫu.

Thí dụ:

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

Có thể bạn đang định tuyến đến một số trang khác trong quá trình gửi biểu mẫu của mình. Sử dụng điều hướng tuyến đường có lập trình, như trong ví dụ sau, thay vì chuyển routerlinkvào mẫu:

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