Angular Form Submission

In this tutorial, we will learn how to create a simple angular application to submit a form.

Technology and Tools

  • Angular cli

First, we will need to generate our new component using angular cli with command ng generate component /login

4 files being created, and 1 file is updated

then we generate another empty class to hold the form object, ng generate class /class/user

2 files created

Next we will draw our form html at login.component.html

<form #loginForm="ngForm" (ngSubmit)="login();">
  <div class="form-group">
    <label for="username">Username : </label>
    <input [(ngModel)]="user.username" type="text" class="form-control" name="username" required>

  <div class="form-group">
    <label for="password">Password : </label>
    <input [(ngModel)]="user.password" type="password" class="form-control" name="password" required>

  <button type="submit" [disabled]="!loginForm.valid" class="btn btn-success">Submit</button>
  • loginForm=”ngForm” – mark the form as angular form
  • (ngSubmit)=”login();” – when the form is submit go to login function in component file
  • [(ngModel)]=”user.username” – map the input field to angular model
  • [disabled]=”!loginForm.valid” – disable the submit button when the form is invalid

Now we go to login.component.ts to add in the form submission logic and the form model.

import { Component, OnInit } from '@angular/core';
import { User } from '../class/user';

  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
export class LoginComponent implements OnInit {

  constructor() { }

  user: User;

  ngOnInit() {
    this.user = new User();

  login(): void {
    console.log("submit form");
    console.log("username => " + this.user.username);
    console.log("password => " + this.user.password);


Output Result

Other project files


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from '../app/login/login.component';

const routes: Routes = [{path: "", component: LoginComponent}];

  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
export class AppRoutingModule { }


import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }


<!--The content below is only a placeholder and can be replaced.-->
<link rel="stylesheet" href="" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div style="text-align:center">
    Welcome to {{ title }}!

Angular Form Submission
Tagged on:

Leave a Reply

Your email address will not be published. Required fields are marked *