ng-submit v AngularJS: Příklad pro zpracování odeslání formuláře

Od: James Hartman James Hartman
Hours aktualizováno

⚡ Chytré shrnutí

ng-submit v AngularJS váže funkci kontroleru na událost odeslání formuláře v prohlížeči, takže zadané hodnoty jsou zpracovány uvnitř kontroleru a stránka se nikdy nenačte znovu pomocí výchozího POSTu.

  • 🔘 Direktivní role: ng-submit váže výraz AngularJS na událost submit elementu formuláře.
  • ☑️ Žádné opětovné načtení stránky: Výchozí POST prohlížeče je potlačen, pokud formulář neobsahuje atribut action.
  • (Tj. Zpracovaný příklad: Textové pole a funkce Display() vloží každé téma do pole AllTopic pro ng-repeat.
  • 🧪 Ověřovací brána: Párování $valid s novalidate a ng-disabled blokuje odesílání neúplných dat.
  • 🛠️ Častá chyba: Vazba ng-click na tlačítko pro odeslání vedle ng-submit způsobí dvojité odeslání.
  • 📊 Poznámka k verzi: Podpora AngularJS skončila v lednu 2022; moderní Angular odesílá přes (ngSubmit).
Přečíst více

Direktiva ng-submit v AngularJS vázající událost odeslání formuláře na funkci controlleru

Směrnice AngularJS ng-submit

Jedno ng-předložit direktiva v AngularJS se používá k navázání aplikace na událost send prohlížeče. Tedy v případě AngularJS na události odeslání můžete provést určité zpracování v rámci samotného správce a poté zobrazit zpracované informace uživateli.

Poznámka k verzi: AngularJS 1.x ukončil dlouhodobou podporu k 31. prosinci 2021 a tým frameworku to potvrzuje. Podpora AngularJS oficiálně ukončena v lednu 2022, takže nebudou následovat žádné verze ani bezpečnostní záplaty. Každý krok a blok kódu níže je zachován přesně tak, jak je napsán, jako historický odkaz. Nová práce patří do moderního Angularu, který vyjadřuje stejnou myšlenku jako (ngSubmit) vázaný na FormGroup.

Jak odeslat formulář v AngularJS pomocí ng-submit

Procesy odesílání informací na webové stránce jsou obvykle zpracovávány událostí odeslání ve webovém prohlížeči. Tato událost se běžně používá k odeslání informací, které uživatel mohl zadat na webovou stránku, na server k dalšímu zpracování, jako jsou přihlašovací údaje, data formuláře atd. Odeslání informací lze provést prostřednictvím požadavku GET nebo POST.

Vezměme si příklad odeslání formuláře Angular, abychom viděli, jak odesílat formuláře v AngularJS.

V našem příkladu odeslání formuláře AngularJS představíme uživateli textové pole, do kterého může zadat téma, které se chce naučit. Na stránce bude tlačítko pro odeslání, které po stisknutí přidá téma do neuspořádaného seznamu.

Níže uvedený obrázek trackteré plynou od tématu zadaného do textového pole, přes tlačítko Odeslat, až po položku seznamu připojenou pod ním.

Formulář AngularJS s textovým polem pro téma, tlačítkem Odeslat a výsledným neuspořádaným seznamem témat
Odeslání formuláře v AngularJS pomocí ng-submit

Příklad odeslání formuláře AngularJS

Nyní uvidíme příklad odeslání formuláře AngularJS z Controlleru pomocí směrnice ng-submit:

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body  ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">

    <form ng-submit="Display()">
        &nbsp;&nbsp;&nbsp;
        Enter which topic you would like to learn
        <input type="text"  ng-app="sampleApp" ng-model="Topic"><br>

        <input type="submit" value="Submit"/>

        <ul ng-repeat="topicname in AllTopic">
            <li>{{topicname}}</li>
        </ul>
    </form>
</div>

<script>
   var sampleApp = angular.module("sampleApp",[]);

    sampleApp.controller("AngularController",function($scope) {
        $scope.AllTopic=[];
        $scope.Display = function () {
            $scope.AllTopic.push($scope.Topic);
        }
    });
</script>
</body>
</html>

Code Vysvětlení:

  1. Nejprve deklarujeme HTML tag formuláře, který bude obsahovat ovládací prvky „textové pole“ a „tlačítko pro odeslání“, jak je znázorněno v příkladu události odeslání formuláře v Angularu. Poté pomocí direktivy ng-submit v AngularJS navážeme funkci „Display()“ na náš formulář. Tato funkce bude definována v našem kontroleru a bude volána při odeslání formuláře.
  2. Máme textový ovládací prvek, ve kterém uživatel zadá Téma, které se chce naučit. To bude vázáno na proměnnou nazvanou 'Topic', která bude použita v našem ovladači.
  3. V AngularJS je normální tlačítko pro odeslání, na které uživatel klikne, když zadá požadované téma.
  4. Použili jsme ng-opakovat direktiva pro zobrazení položek seznamu témat, která uživatel zadává. Direktiva ng-repeat prochází každé téma v poli 'AllTopic' a podle toho zobrazuje název tématu.
  5. V našem kontroleru deklarujeme proměnnou pole s názvem „AllTopic“. Ta bude sloužit k uchovávání všech témat zadaných uživatelem v kroku 2.
  6. Definujeme kód pro naši funkci Display(), která bude volána vždy, když uživatel klikne na tlačítko Odeslat. Zde používáme funkci push array k přidání témat zadaných uživatelem prostřednictvím proměnné 'Topic' do našeho pole 'AllTopic'.

Pokud je vzorový kód formuláře AngularJS úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:

Výstup prohlížeče pro příklad AngularJS ng-submit zobrazující prázdné textové pole tématu a tlačítko Odeslat

Chcete-li vidět, že kód funguje, nejprve zadejte do textového pole název tématu, jako je „Angular“, jak je uvedeno výše, a poté klikněte na tlačítko Odeslat.

Výstup AngularJS ng-submit po kliknutí na tlačítko Odeslat, přičemž zadané téma bylo přidáno do seznamu

  • Po kliknutí na tlačítko Odeslat uvidíte položku, která byla zadaná do textového pole přidána do seznamu položek.
  • Toho je dosaženo funkcí Display(), která je volána po stisknutí tlačítka Odeslat.
  • Funkce Display() přidá text do proměnné pole nazvané 'AllTopic.' A naše direktiva ng-repeat prochází každou hodnotu v proměnné pole 'AllTopic' a podle toho je zobrazuje jako položky seznamu.

SOUVISEJÍCÍ ČLÁNKY

ng-submit vs ng-click: který z nich použít

Oba Direktivy AngularJS mohou volat stejnou funkci kontroleru, ale naslouchají různým událostem prohlížeče. ng-submit sedí na <form> tag a reaguje na událost submit, takže se spustí i když uživatel stiskne Enter uvnitř pole. ng-click sedí na tlačítku a reaguje pouze na kliknutí myší nebo ekvivalentní aktivaci.

Vzhled ng-předložit ng-click
Hostitelský prvek Tag formuláře Jakýkoli klikatelný prvek
Událost poslouchána odeslat, včetně klávesy Enter pouze kliknutí
Výchozí prohlížeč POST Potlačeno směrnicí Stále se spouští z tlačítka pro odeslání
Přístup ke stavu formuláře Čte hodnoty $valid a $invalid z kontroleru formuláře. Žádný vlastní kontext formy
Přirozený střih Předávání dat z formuláře kontroléru Tlačítka panelu nástrojů, odkazy, modální spouštěče

Volbu obvykle rozhoduje podpora klávesnice. Formulář propojený s ng-click sám o sobě ignoruje klávesu Enter, což frustruje uživatele při vyplňování přihlašovacího pole. Rezervovat ng-click pro akce, které nejsou odesláním formuláře, jako je například vymazání pole nebo otevření dialogového okna.

Proč ng-submit brání odeslání z výchozího prohlížeče

Jednoduchý HTML formulář reaguje na událost submit serializací svých polí a výzvou prohlížeči k načtení nové stránky, čímž se zahodí všechny hodnoty obsažené v dané události. $scope, ng-submit direktiva tomu zabrání: volá preventDefault() pro vás, takže výraz se spustí a aktuální stránka zůstane na místě. Ne $event argument a není vyžadováno žádné ruční volání.

Potlačení má jednu zdokumentovanou podmínku. Podle Referenční číslo ngSubmit, výchozí akce je zabráněna pouze tehdy, pokud formulář neobsahuje žádné action, data-action or x-action atribut. Přidejte kterýkoli z nich a prohlížeč se po dokončení obslužné rutiny bude pohybovat jako obvykle, což je správné chování pro postupně vylepšovaný serverem vykreslený formulář a překvapení všude jinde.

Protože direktiva pohlcuje objekt události, přečtěte si odeslané hodnoty z vlastností, které ng-model zapisovali do rozsahu působnosti nebo je explicitně předávali, jako v ng-submit="Display(Topic)".

Jak ověřit formulář před spuštěním příkazu ng-submit

Výše uvedený příklad akceptuje prázdné téma, protože nic nejprve nekontroluje textové pole. AngularJS vytvoří pro každý pojmenovaný formulář kontroler a tento kontroler zpřístupní příznaky potřebné k odeslání formuláře. novalidate takže prohlížeč nechává své vlastní HTML5 bubliny vypnuté a AngularJS ověření formuláře přebírá.

  1. Zadejte formulář nameAngularJS publikuje kontroler s daným názvem na okolním kontrolor rozsah.
  2. přidat novalidate do tagu formuláře, aby nativní ověření prohlížeče nebylo v cestě.
  3. Označte pole pomocí required, ng-minlength, ng-maxlength or ng-pattern.
  4. Chraňte psovoda $valida předejte kontroler formuláře, aby funkce mohla kontrolovat jednotlivá pole.
  5. Deaktivujte tlačítko pomocí ng-disabled ukazující na $invalid, který poskytuje okamžitou vizuální zpětnou vazbu.
<form name="topicForm" ng-submit="topicForm.$valid && Display(topicForm)" novalidate>
    <input type="text" name="Topic" ng-model="Topic" required>
    <input type="submit" value="Submit" ng-disabled="topicForm.$invalid">
</form>

Dvě chyby jsou příčinou většiny hlášených problémů s tímto vzorem:

  • Double podání. Vazba ng-click na tlačítko Odeslat během ng-submit sedí na formuláři a spustí obslužnou rutinu dvakrát, jednou za událost. Oficiální reference varuje před kombinováním obou obslužných rutin, proto si vyberte jednu.
  • Neočekávané odeslání. Jakékoli tlačítko uvnitř formuláře bez type="button" Vyvolá událost Submit. Tlačítka Cancel a Reset explicitně označí, jinak také spustí obslužnou rutinu.

Stráží dál $valid je to pohodlí, nikoli bezpečnostní kontrola. Hodnoty je stále nutné před uložením znovu ověřit na serveru.

Nejčastější dotazy

Ano. Formulář obsahující vstup nebo tlačítko typu submit vyvolá událost submit, když je uvnitř pole stisknuta klávesa Enter, takže výraz ng-submit se spustí bez další obslužné rutiny kláves.

Ne. Pouze elementy formuláře vyvolávají událost submit, na kterou direktiva čeká. Přesuňte ng-submit na tag formuláře nebo připojte ng-click k elementu, na který chcete reagovat.

ng-submit nepředává žádné argumenty. Přečte vlastnosti rozsahu, které ng-model naplnil, nebo je explicitně předá, například ng-submit=”Display(Topic)” nebo ng-submit=”Display(topicForm)”.

Ano. Každý prvek formuláře má svůj vlastní kontroler formuláře, takže každému formuláři dejte jedinečný název a navažte na něj samostatný obslužný program. Sdílení jedné funkce napříč formuláři vede ke kolizím oborů.

Obslužná rutina se aktivuje v obou směrech, ale pole bez ng-model nikdy nezapisuje svou hodnotu do $scope, takže funkce ji nemůže číst. Svázejte každý vstup, který plánujete zpracovat.

Zkompilujte formulář v testu, nastavte hodnotu modelu na rozsah, spusťte událost submit a poté proveďte assert na poli nebo volání služby, které obslužná rutina vygeneruje. Karma s Jasmine zůstává obvyklým párováním.

Jazykové modely čtou požadovaný tvar a návrh modelu, atributy ng-pattern a ng-minlength a také odpovídající zprávy, což značně ovlivňuje AngularJS. ověření formuláře zapracovat do kroku kontroly.

GitHub Copilot Agentský režim přepíše šablonu do (ngSubmit) s FormGroup a vytvoří scaffold třídy komponenty, ale vygenerované validátory a asynchronní volání stále vyžadují lidskou kontrolu a testy.

Shrňte tento příspěvek takto: