Angular 2: Form bağlı olmadığı için form gönderme iptal edildi

Form içeren bir modal var, modal yok edildiğinde konsolda şu hatayı alıyorum:

Form bağlı olmadığı için form gönderme iptal edildi

Modal, en üst düzey öğemin <modal-placeholder>doğrudan alt öğesi olan öğeye eklenir <app-root>.

DOM'dan bir formu kaldırmanın ve Angular 2'de bu hatayı gidermenin doğru yolu nedir? Şu anda kullanıyorumcomponentRef.destroy();

Bunun olmasının başka nedenleri olabilir, ancak benim durumumda tarayıcı tarafından bir gönder düğmesi olarak yorumlanan bir düğmem vardı ve bu nedenle, hataya neden olan düğme tıklandığında form gönderilmişti. Type = "button" eklenmesi sorunu çözdü. Tam öğe:

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

Form etiketinde aşağıdakileri yazmalısınız:

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

ve formun içinde gönder düğmesine sahip olmanız gerekir:

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

Ve en önemlisi, formunuzda başka düğmeler varsa type="button"bunlara eklemelisiniz . Varsayılan typeniteliği bırakmak (ki öyle olduğunu düşünüyorum submit) uyarı mesajına neden olacaktır.

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

Bu yüzden, bir modelin dahil olmaması dışında, bugün aynı problemle karşılaştım. Formumda iki düğmem var. Formu gönderen ve tıklandığında önceki sayfaya yönlendiren biri.

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

RouterLink ile ilk düğmeye tıklamak, tam olarak yapması gerekeni yapar, ancak görünüşe göre formu da göndermeye çalışır ve daha sonra formun bulunduğu sayfa gönderim sırasında DOM'den kaldırıldığı için form gönderimini terk etmek zorundadır.

Bu, tüm sayfa yerine bir modal olması dışında, başınıza gelenle aynı gibi görünüyor.

İkinci düğmenin türünü doğrudan gönder dışında bir şey olarak belirtirseniz sorun çözülür.

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

Bu nedenle, bir 'İptal' düğmesi veya benzeri bir şey aracılığıyla modeli kapatıyorsanız, yukarıda gösterildiği gibi bu düğmenin türünü belirtmeniz sorununuzu çözecektir.

Form öğesinde, aşağıdaki gibi gönderme yöntemini (ngSubmit) tanımlamanız gerekir: <form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">

ve gönder düğmesinde tıklama yöntemini atlarsınız, çünkü formunuz artık gönderme yöntemine bağlıdır: <button class="btn btn-success" type="submit">Save</button>Düğme, gönderme türünde olmalıdır.

Bileşenin arkasındaki kodda "onSubmit" yöntemini uygularsınız, örneğin şuna benzer bir şey: onSubmit(value: ICurrency) { ... } Bu yöntem, form alanlarından değerler içeren bir değer nesnesi alıyor.

Formun gönderilmesine bileşenin imhası eşlik ediyorsa, Formun DOM'dan çıkarılmasıyla Form gönderme yarış durumunda başarısız olur. Söyle, bizde

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

Eğer saveData(bu API çağrısı aracılığıyla verileri kaydeder örneğin) zaman uyumsuz olduğu o zaman sonucu bekleyin edilebilir:

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

Formu derhal terk etmeniz gerekiyorsa, sıfır gecikmeli bir yaklaşım da işe yaramalıdır. Bu, DOM ayrılmasının Form gönderimi çağrıldıktan sonra sonraki olay döngüsünde olmasını garanti eder:

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

Bu, düğme türünden bağımsız olarak çalışmalıdır.

Son zamanlarda bu sorunu yaşadım ve event.preventDefault()benim için çalıştım. Tıklama etkinliği yönteminize ekleyin.

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

Ve:

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

Bunu Angular 6'da, hiç gönderme düğmesi olmasa bile görüyorum. aynı şablonda birden çok form olduğunda gerçekleşir. bir çözüm olup olmadığından / çözümün ne olduğundan emin değilim.

Bu uyarıyı aldım, düğme türünü "gönder" i "düğme" olarak değiştirdim sorunu çözüldü.

Yine de düğmenin işlevselliğini "gönder" türünde sürdürmek istiyorsanız, bu düğmedeki tıklama olayını kullanmamalısınız. Bunun yerine formdaki ngSubmit olayını kullanmalısınız.

Misal:

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

Belki de form gönderiminizde başka bir sayfaya yönlendiriliyorsunuz. routerlinkŞablona geçmek yerine aşağıdaki örnekte olduğu gibi programlı rota navigasyonunu kullanın :

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