Formularze

Pobieranie danych wejściowych od użytkownika jest podstawą każdej aplikacji. Oznacza to konieczność zajmowania się formularzami i ich złożonością.

W Angular rozróżniamy:

• Formularze oparte na szablonach umieszczają większość logiki obsługi formularzy w szablonie.
• Reactive Forms umieszcza logikę obsługi formularzy we właściwościach klasy komponentu i zapewnia interakcję za pomocą "Obserwacji".

Pierwsze kroki

Opt-In API

Zanim zagłębimy się w którąkolwiek z funkcji formularza, musimy zaimportować do modułu klasę FormsModule lubReactiveFormsModule.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { FormsModule } from '@angular/forms';
import { AppComponent } from './components'

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {
}

platformBrowserDynamic().bootstrapModule(AppModule)

Pola wejścia

Większość przykładów formularzy wykorzystuje następujący styl HTML5 do etykietowania pól wejściowych:

<label for="name">Name</label>
<input type="text" name="username" id="name">

Angular obsługuje również alternatywny styl HTML5, który nie wymaga koniecznoci użycia id w polu <input> :

<label>
  Name
  <input type="text" name="username">
</label>