Angular 9 Template and Model Driven Forms

Hello Friends,

In this tutorial, we will be discussing about Template Driven and Model Driven Form creation.

Model Driven Form:
In Model driven form, app.module.ts need to be updated import { ReactiveFormsModule } from '@angular/forms'; and need to be imported in Imported Array.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { HttpService } from './services/http.service';
import { ReactiveFormsModule } from '@angular/forms';
import { loginComponent } from './login/login.component';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent,
    loginComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },

      { path: 'login', component: loginComponent, pathMatch: 'full' }
    ])
  ],
  providers: [HttpService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Create a login folder and create login.component.ts and login.component.html

In login.component.ts  import { FormGroup, FormControl } from '@angular/forms'.

import { FormGroup, FormControl } from '@angular/forms';
import { Component } from '@angular/core';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class loginComponent {
  onClickSubmit(data) {
    alert("Entered Email id : " + data.emailid);
  }
}

In login.component.html

<form #userlogin="ngForm" (ngSubmit)="onClickSubmit(userlogin.value)">
  <input type="text" name="emailid" placeholder="emailid" ngModel>
  <br />
  <input type="password" name="passwd" placeholder="passwd" ngModel>
  <br />
  <input type="submit" value="submit">
</form>

Run the application and click the button.