Getting Started

Opt-In APIs

Before we dive into any of the form features, we need to do a little bit of housekeeping.We need to bootstrap our application using the FormsModule or ReactiveFormsModule.

  1. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
  2. import { FormsModule } from '@angular/forms';
  3. import { AppComponent } from './components'
  5. @NgModule({
  6.   imports: [
  7.     BrowserModule,
  8.     FormsModule,
  9.   ],
  10.   declarations: [AppComponent],
  11.   bootstrap: [AppComponent]
  12. })
  13. export class AppModule {
  14. }
  16. platformBrowserDynamic().bootstrapModule(AppModule)

Input Labeling

Most of the form examples use the following HTML5 style for labeling inputs:

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

Angular also supports the alternate HTML5 style, which precludes the necessity of ids on <input>s:

  1. <label>
  2.   Name
  3.   <input type="text" name="username">
  4. </label>

原文: https://angular-2-training-book.rangle.io/handout/forms/getting-started.html