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;

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

  constructor() { }

  ngOnInit() {
  }

  submit(){
    alert(JSON.stringify(this.model));
  }
}

Bind the user model with user form - user.component.html
<link rel="stylesheet" href="https://unpkg.com/[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)]="model.id" name="title">
    </div>
    <div class="form-group">
      <label for="author">User Name</label>
      <input type="text" class="form-control" id="author" required [(ngModel)]="model.name" name="author">
    </div>
    <div class="form-group">
      <label for="url">URL Blog</label>
      <input type="text" class="form-control" id="url" [(ngModel)]="model.url" name="url">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
   </form>

   <div> Result - {{model | json}}</div>
 </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';

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,//#1
    RouterModule.forRoot([
      { 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>
<router-outlet></router-outlet>


Result –


ANIL SINGH

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 - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions