assets/data/empData.json
[
{
"name" : "Tyson Gill",
"emailId" : "gill.tyson332@gmail.com",
"address" : "Sky 332",
"city" : "Thane",
"state" : "Maharashtra",
"zip" : 400037,
"gender" : "Male",
"married" : true
}
]
employee.ts
export interface IEmployee{
name: string;
emailId: string;
address: string;
city: string;
state: string;
zip: number;
gender: string;
married: boolean;
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="card border-primary mb-3">
<div class="card-header" style="background-color: #007BFF; color : white">
Edit Employee
</div>
<div class="card-body">
<form (ngSubmit)="onSubmit()" #f="ngForm">
<div class="form-row">
<div class="form-group col-md-6">
<label for="fullName">Name</label>
<input
type="text"
class="form-control form-control-sm"
id="fullName"
placeholder="Name"
[(ngModel)]="name"
name="fullName">
</div>
<div class="form-group col-md-6">
<label for="emailId">Email Id</label>
<input type="email" class="form-control form-control-sm" id="emailId" placeholder="Email-Id" name="emailId" [(ngModel)]="emailId">
</div>
</div>
<div class="form-group form-inline">
<label for="inputAddress" class="col-md-2" style="padding-left: 0px;">Address</label>
<input type="text" name="address" [(ngModel)]="address" class="form-control form-control-sm col-md-10" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" name="city" [(ngModel)]="city" class="form-control form-control-sm" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" name="state" [(ngModel)]="state" class="form-control form-control-sm">
<option selected>Maharashtra</option>
<option>Kerala</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" name="zip" [(ngModel)]="zip" class="form-control form-control-sm" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" [(ngModel)]="gender" type="radio" name="gender" id="male" value="Male" checked>
<label class="form-check-label" for="exampleRadios1">
Male
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" [(ngModel)]="gender" type="radio" name="gender" id="female" value="Female">
<label class="form-check-label" for="exampleRadios2">
Female
</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="gridCheck" [(ngModel)]="married" name="married">
<label class="form-check-label" for="gridCheck">
Married
</label>
</div>
</div>
<div class="card-footer" style="background-color: white">
<div style="text-align:center">
<button type="submit" class="btn btn-primary" >Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
app.component.ts
import { Component, ViewChild, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { IEmployee } from './employee';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
public employee: IEmployee[];
name: string;
emailId: string;
address: string;
city: string;
state: string;
zip: number;
gender: string;
married: boolean;
title = 'Observables Demo';
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.getUserDataFromDb();
}
onSubmit() {
console.log();
}
getUserDataFromDb(){
this.http.get<IEmployee[]>('/assets/data/empData.json').subscribe(
(response) => { console.log('Response : ' + response); this.employee = response; },
(error) => { console.log('Error : ' + error); },
() => { console.log('Completed'); this.fillTheForm() }
);
}
fillTheForm(){
console.log('Fill the form called');
this.name = this.employee[0].name;
this.emailId = this.employee[0].emailId;
this.address = this.employee[0].address;
this.city = this.employee[0].city;
this.state = this.employee[0].state;
this.zip = this.employee[0].zip;
this.gender = this.employee[0].gender;
this.married = this.employee[0].married;
}
}
Output :
