Burchak 2: Shaklni yuborish bekor qilindi, chunki shakl bog'liq emas

Modul yo'qolganida ariza mavjud modal mavjud, quyidagi konsolda xatolikka yo'l qo'yaman:

Shaklni yuborish bekor qilindi, chunki ariza yopiq emas.

The modal is added to a element which is a direct child to , my top level element.

DOMdan ariza olib tashlash va bu xato 2 burchakdan najot topishning to'g'ri usuli qanday? Hozirda componentRef.destroy (); dan foydalanaman

33
@mickdev Formani yashirish va ko'rsatish uchun * ngif foydalansam nima qilishim kerak?
qo'shib qo'ydi muallif Jun, manba
@mickdev no * ngIf, bu kabi modalni yo'q qilaman componentRef.destroy (); , men savolga qo'shimcha tafsilotlar qo'shdim. Rahmat!
qo'shib qo'ydi muallif nick, manba
Shaklni yashirgan va ko'rsata oladigan biror narsangiz bormi?
qo'shib qo'ydi muallif mickdev, manba

7 javoblar

Buning boshqa sabablari bo'lishi mumkin, ammo mening vaziyatimda brauzer tomonidan taqdim etish tugmasi sifatida sharhlangan tugma bor edi va shuning uchun tugma bosilganda xatoga yo'l qo'yilganda ariza topshirildi. Turini qo'shish = "tugma" muammoni bartaraf etdi. To'liq element:

    <button type="button" (click)="submitForm()">
77
qo'shib qo'ydi
Ushbu tugmachani bekor qilish tugmasi joriy qilingan joyda mening * ngIf direktivasi orqali ariza formasini olib tashladi. Menda ("muvaffaqiyatli saqlab qolingan") formani olib tashlash uchun mantiqni tetiklaydigan "SAVE" tugmasi bor, ammo bu xato xabari hech qachon paydo bo'lmadi, garchi menda tip = "tugma" bo'lmasa ham.
qo'shib qo'ydi muallif AlanObject, manba
"Nour" ning javobi eng oddiy va kalitni kiritish imkonini beradi.
qo'shib qo'ydi muallif Heiner, manba
Ishonchim komilki, nima uchun bu javobni qabul qildingiz, buning uchun siz ariza yuborish uchun kirishni bosish qobiliyatini yo'qotasiz.
qo'shib qo'ydi muallif Peter LaBanca, manba

Shakli yorlig'ida quyidagilarni yozishingiz kerak:

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

va sizning arizangizning ichidagi tugmani bosish kerak:

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

Va eng muhimi, sizning shaklingizda boshqa tugmalar mavjud bo'lsa, ularga type = "button" ni qo'shishingiz kerak. Standart turi xususiyatidan chiqish ( submit deb o'ylayman) ogohlantirish xabarini olib keladi.

<button type="button"></button>
21
qo'shib qo'ydi
Agar siz ngFormga murojaat qilishni talab qilmasangiz, siz haqsiz.
qo'shib qo'ydi muallif Nour, manba
Menimcha # myForm = "ngForm" talab qilinmaydi.
qo'shib qo'ydi muallif Heiner, manba

Shu sababli, bugungi kunda faqat shu kabi muammolarga duch keldim. Menga tegishli ikkita tugma bor. Shaklni yuboradigan kishi va tugmani bosganingizda oldingi sahifaga qaytib boradi.

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

RouterLink bilan birinchi tugmachani bosib, uni to'liq kiritish kerak, lekin ayni paytda ariza topshirishga urinadi va keyinchalik arizani yoqqan sahifani yuborish paytida DOMdan ajratilganligi uchun arizani topshirishdan voz kechish kerak.

Bu butun sahifaning o'rniga modaldan tashqari, siz bilan yuz beradigan hodisa kabi ko'rinadi.

To'g'ridan-to'g'ri ikkinchi tugmani turini to'g'ridan-to'g'ri yuborishdan boshqa narsa bo'lishini aniqlasangiz, muammo hal bo'ladi.

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

Shunday qilib, siz modalni "Bekor qilish" tugmasi yoki tartibida biror narsa bilan yopayotgan bo'lsangiz, yuqorida ko'rsatilgandek, ushbu tugmani turini belgilab, muammoingizni hal qilish kerak.

15
qo'shib qo'ydi

In the form element you need to define submit method (ngSubmit), something like: <form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">

va tugmachasini bosish usulini bosib o'tishingiz mumkin, chunki arizangiz endi yuborilgan usuliga ulangan:    <button class = "btn btn-success" type = "submit"> Saqlash Bu tugma jo'natish turiga to'g'ri kelishi kerak.

Komponentda saqlangan kodda "onSubmit" usuli qo'llaniladi, masalan, quyidagi kabi:      onSubmit (qiymat: ICurrency) { ... } Ushbu usul ariza maydonlarining qiymatlari bo'lgan qiymat obyektini oladi.

5
qo'shib qo'ydi
Rahmat, siz hali tugmani = "forma" ni ishlatmoqchi bo'lsangiz, bu qabul qilingan javob bo'lishi kerak
qo'shib qo'ydi muallif Fjut, manba

Agar arizani topshirishda komponentni yo'q qilish bilan birga olib borilsa, Shaklni DOM shaklidan ajratib olish bilan poygadagi topshiriq noto'g'ri. Ayt, biz bor

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

Agar saveData </​​code> mos kelmaydigan bo'lsa (masalan, ma'lumotlarni API chaqiruvi orqali saqlab qolsa), natijani kutishimiz mumkin:

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

Formani darhol tark etmoqchi bo'lsangiz, nol kechikish bilan shug'ullanish kerak. Bu DOM ajratmasining arizani topshirishdan keyin keyingi hodisa aylanasida bo'lishiga kafolat beradi:

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

Bu tugma turiga qaramasdan ishlashi kerak.

4
qo'shib qo'ydi

Buni 6-burchakda, hatto tugmani hech qanday tugma bilan ko'rmayapman. bir xil shablonda bir nechta shakllar mavjud bo'lganda sodir bo'ladi. echim yo'qmi yoki yo'qmi nima ekanligi aniq emas.

0
qo'shib qo'ydi

Yaqinda ushbu muammo yuzaga keldi va event.preventDefault() men uchun ishladi. Uni sekin urish hodisasi usulingizga qo'shing.

0
qo'shib qo'ydi
Bu javob uchun etarli ma'lumot yo'q. Iltimos, ushbu echimning boshqacha bo'lganidan yoki bu vazifada bir nechta echimlarga ega bo'lganidan qat'i nazar, bu yechimning qanday qilib ishonchli ekanini tushuntirib bering. Pochta yuborishdan oldin SO ko'rsatmalarini o'qing.
qo'shib qo'ydi muallif sparkplug, manba
Angular Uzbekistan
Angular Uzbekistan
107 ishtirokchilar

Guruh Angular bo'yicha muloqot qilish uchun ochilgan Sizni qiziqtirsa: @nodejs_uz @react_uz @angular_uz @yiiframework_uz @js_uzb @typescript_uzb @vuejs_uz @ngTashkent @laravel_uz @uzdevgroup Ish o'rinlari @UzDev_jobs

Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb

ngTashkent
ngTashkent
77 ishtirokchilar

Правила просты: 1. Не хамить 2. Не хейтить 3. Реакт не нужен Ссылки: https://t.me/angular_ru - старший брат https://t.me/angular_uz - ангулар на узбекском @js_uzb @vuejs_uz @react_uz @nodejs_uz @yiiframework_uz @uzdevgroup @UzDev_Jobs @tasdev_talks