python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions 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
Actions of Event Binding - Angular 4

Angular 5/4 Forms and Validation Examples - Template Driven Form

In this Article, we will see “How Angular 5/4 forms are used or create?”  There are basically two types of Angular forms
ü  Template driven form
ü  Model driven forms
And In this section, I will discuss about template driven form.

The following Example-
app.module.ts -
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';

import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';

import {DateServiceServicefrom '../app/date-service.service';
import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { BillComponent } from './bill/bill.component';
import {BillServicefrom '../app/bill.service';

@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
    BillComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path:'app-user', component : UserComponent
      },
      {
        path:'app-bill', component : BillComponent
      }
    ])
  ],
  providers: [DateServiceService, BillService],
    bootstrap: [AppComponent]
})
export class AppModule { }


user.component.ts -
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  date; //date Variable
  users = [
    {name: "Anil Singh", qualification: ["B.Sc.", "MCA", "MCTS", "MCP"]},
    {name: "Reena Singh", qualification: ["B A", "M A", "BTC"]}
  ]; // User array
 
  constructor() { }
 
  ngOnInit() {
    this.date = new Date(); // Today date and time
  }

  //Login method - click event
  loginUserMethod(data){
   alert(JSON.stringify(data));
  }
}


user.component.html -
<H2>Anular 5/4 Forms - login</H2><hr/>
<label>Today Date - {{date}}</label>
<br/>
<form #loginMethod="ngForm" (ngSubmit) = "loginUserMethod(loginMethod.value)" >
  <div>
      <input type = "text" class="textbox"  name="emailid" placeholder="Email" ngModel>
  </div>
  <div>
      <input type="password" class="textbox" name="passwd" placeholder="Passwd" ngModel>
  </div>
  <div>
      <input type="submit" class="button default-button" value="submit">
  </div> 
</form>


user.component.css -

/* //Testbox CSS */
.textbox {
    background: white;
    border: 1px solid #DDD;
    border-radius: 2px;
    box-shadow: 0 0 5px #DDD inset;
    color: #666;
    outline: none;
    height:25px;
    width: 275px;
   }

   /* //Default button */
   .default-button {background-color: #e7e7e7; color: black;} /* Gray */

   /* //Button CSS */
   .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}


The Result looks like –


Video links for Angular 5/4 forms –
I hope you are enjoying with this post! Please share with you friends. Thank you!!
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