Obsługa zdarzenia submit formularza

Słownik kwalifikacji INF.04 - Projektowanie, programowanie i testowanie aplikacji

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.