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>

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

  <button type="submit" [disabled]="!loginForm.valid" class="btn btn-success">Submit</button>
</form>
  • 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';


@Component({
  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

app-routing.module.ts

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

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

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

app.module.ts

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';

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

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

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

<router-outlet></router-outlet>
Angular Form Submission
Tagged on:

Leave a Reply

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