Angular 2 Form


Angular 2 Form

Angular 2 Form provides us facility to use login, signup or submit any request. Angular 2 Form handling is much more flexible than Angular 1 Form for handling forms.

There are two types of form handling in Angular 2.

  1. Template Driven Forms – Form handling logic will be placed within form’s tag.
  2. Reactive Forms –  Form handling logic will be placed within Angular Component’s class properties and provides interaction through Observables.

To use Angular 2 form handling we need to bootstrap Angular givenFormsModule or ReactiveFormsModule in any of the main @NgModule like below.

import { FormsModule } from '@angular/forms';
import { AppComponent } from './components'

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

Form Input Labeling

  1. Each input element should have an id property that is used by the label element.
  2. Each label element should havefor attribute to match the label to its input control.
  3. Each input element should have name property that is required by Angular forms to register the control with the form.
<label for="name">Name:</label>
<input type="text" name="name" id="name">






Full-stack web and mobile app development company Contact Us : Skype: indore.webcoder Email: info@w3sparks.com Sales: +91 8085506229