Zdarzenie submit występuje wtedy, gdy użytkownik wysyła formularz, np. klikając przycisk typu submit albo naciskając Enter w polu formularza. W aplikacjach webowych obsługuje się je po to, aby przechwycić dane z formularza i wykonać własną logikę, np. walidację, zapis do bazy lub wyświetlenie danych w konsoli.
Angular
W Angularze często używa się zdarzenia (ngSubmit):
<form #f="ngForm" (ngSubmit)="submit(f)">
<input ngModel name="tytul" type="text">
<button>Dodaj</button>
</form>
Metoda w komponencie może odebrać obiekt formularza:
submit(f) {
console.log(f.value);
}
f.value zawiera dane pól formularza, np. { tytul: "tekst" }. Aby Angular mógł poprawnie zebrać wartość pola w formularzu szablonowym, pole powinno mieć ngModel oraz atrybut name.
React
W React zdarzenie submit obsługuje się przez onSubmit:
<form onSubmit={this.handleSubmit}>
<input type="text" id="tytul" />
<button>Dodaj</button>
</form>
Przykładowa metoda:
handleSubmit = e => {
e.preventDefault();
console.log(e.currentTarget.tytul.value);
};
e.preventDefault() blokuje domyślne przeładowanie strony po wysłaniu formularza.
Najważniejsze na egzamin
Jeżeli kod zawiera (ngSubmit) w Angularze albo onSubmit w React, oznacza to obsługę zdarzenia przesłania formularza, a nie automatyczne uzupełnianie formularza ani odczyt danych w czasie rzeczywistym.