python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Angular 5 vs Angular 6

Angular 6 Form submit Example

Create Anular6 project – using below command
ng new project_name

Go to the project - project_name directory

Create the user component – using below command
ng g component user

Create the user class
export class User {
   public id: number;
   public name: string;
   public age: string;
   public url?: string

Create user component - user.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from  '@angular/common/http';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import {User} from '../user;

  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
export class UserComponent implements OnInit {
  model = new User();//user model object

  constructor() { }

  ngOnInit() {


Bind the user model with user form - user.component.html
<link rel="stylesheet" href="[email protected]/dist/css/bootstrap.min.css">

<div class="container">
  <h1>Add User Form</h1>
  <form (submit)="submit()">
    <div class="form-group">
      <label for="title">UserId</label>
      <input type="text" class="form-control" id="title" required [(ngModel)]="" name="title">
    <div class="form-group">
      <label for="author">User Name</label>
      <input type="text" class="form-control" id="author" required [(ngModel)]="" name="author">
    <div class="form-group">
      <label for="url">URL Blog</label>
      <input type="text" class="form-control" id="url" [(ngModel)]="model.url" name="url">
    <button type="submit" class="btn btn-default">Submit</button>

   <div> Result - {{model | json}}</div>

Setup the component and routing in NgModule class
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';//#1
import { RouterModule, Routes } from '@angular/router'; //#2

import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';

  declarations: [
  imports: [
      { path: 'user-link', component: UserComponent } //#2
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Setup the routerLink and router-outlet in app.component.htnl
<a routerLink="/user-link" routerLinkActive="active">link</a>

Result –


Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions