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 {DateServiceService} from '../app/date-service.service';
import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { BillComponent } from './bill/bill.component';
import {BillService} from '../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!!