Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit319b37e

Browse files
committed
Reactive Form
1 parentc334262 commit319b37e

19 files changed

+511
-23
lines changed

‎angular.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,13 @@
4545
"src/assets"
4646
],
4747
"styles": [
48+
"node_modules/bootstrap/dist/css/bootstrap.min.css",
4849
"src/styles.css"
4950
],
50-
"scripts": []
51+
"scripts": [
52+
"node_modules/jquery/dist/jquery.min.js",
53+
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
54+
]
5155
},
5256
"configurations": {
5357
"production": {

‎package-lock.json‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@
2020
"@angular/platform-browser":"^6.1.0",
2121
"@angular/platform-browser-dynamic":"^6.1.0",
2222
"@angular/router":"^6.1.0",
23+
"bootstrap":"^4.6.0",
2324
"core-js":"^2.5.4",
25+
"jquery":"^3.6.0",
2426
"rxjs":"~6.2.0",
2527
"zone.js":"~0.8.26"
2628
},

‎src/app/app-routing.module.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import{NgModule}from'@angular/core';
2+
import{ListEmployeeComponent}from'./emp/list-employee/list-employee.component';
3+
import{RouterModule,Routes}from'@angular/router';
4+
import{PutEmployeeComponent}from'./emp/put-employee/put-employee.component';
5+
6+
constappRoutes:Routes=[
7+
{path:'emp/list',component:ListEmployeeComponent},
8+
{path:'emp/put',component:PutEmployeeComponent},
9+
{path:'emp/put/:id',component:PutEmployeeComponent},
10+
{path:'',redirectTo:"emp/list",pathMatch:'full'}
11+
]
12+
13+
@NgModule({
14+
imports:[
15+
RouterModule.forRoot(appRoutes)
16+
],
17+
exports:[RouterModule]
18+
})
19+
exportclassAppRoutingModule{}

‎src/app/app.component.html‎

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,11 @@
1-
<!--The content below is only a placeholder and can be replaced.-->
2-
<divstyle="text-align:center">
3-
<h1>
4-
Welcome to {{ title }}!
5-
</h1>
6-
<imgwidth="300"alt="Angular Logo"src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
1+
<divclass="container">
2+
<header>
3+
<app-navbar></app-navbar>
4+
</header>
5+
<divclass="mt-3 mb-3">
6+
<router-outlet></router-outlet>
7+
</div>
8+
<footerclass="bg-light">
9+
2021&copy;<astyle="color: rgb(54, 53, 53);"href="https://github.com/madcoderBubt">Sudhananda Biswas</a>
10+
</footer>
711
</div>
8-
<h2>Here are some links to help you start:</h2>
9-
<ul>
10-
<li>
11-
<h2><atarget="_blank"rel="noopener"href="https://angular.io/tutorial">Tour of Heroes</a></h2>
12-
</li>
13-
<li>
14-
<h2><atarget="_blank"rel="noopener"href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
15-
</li>
16-
<li>
17-
<h2><atarget="_blank"rel="noopener"href="https://blog.angular.io/">Angular blog</a></h2>
18-
</li>
19-
</ul>
20-

‎src/app/app.module.ts‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,30 @@
11
import{BrowserModule}from'@angular/platform-browser';
22
import{NgModule}from'@angular/core';
3+
import{FormsModule,ReactiveFormsModule}from'@angular/forms';
4+
import{HttpClientModule}from'@angular/common/http';
35

46
import{AppComponent}from'./app.component';
7+
import{PutEmployeeComponent}from'./emp/put-employee/put-employee.component';
8+
import{ListEmployeeComponent}from'./emp/list-employee/list-employee.component';
9+
import{AppRoutingModule}from'./app-routing.module';
10+
import{NavbarComponent}from'./layout/navbar/navbar.component';
11+
import{EmployeeDataService}from'./service/employee-service.service';
512

613
@NgModule({
714
declarations:[
8-
AppComponent
15+
AppComponent,
16+
PutEmployeeComponent,
17+
ListEmployeeComponent,
18+
NavbarComponent
919
],
1020
imports:[
11-
BrowserModule
21+
BrowserModule,
22+
HttpClientModule,
23+
FormsModule,
24+
ReactiveFormsModule,
25+
AppRoutingModule
1226
],
13-
providers:[],
27+
providers:[EmployeeDataService],
1428
bootstrap:[AppComponent]
1529
})
1630
exportclassAppModule{}

‎src/app/customValidator.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import{AbstractControl,ValidationErrors}from"@angular/forms";
2+
3+
4+
exportclassCustomValidator{
5+
constructor(){}
6+
7+
staticemail(control:AbstractControl):{[key:string]:any;}|null{
8+
constemail:string=control.value;
9+
if((email.lastIndexOf('@')<email.lastIndexOf('.'))&&(email.lastIndexOf('.')<email.length-1))
10+
returnnull;
11+
else{
12+
return{'email':true};
13+
}
14+
};
15+
staticemailDomain(preferedDomain:string){
16+
return(control:AbstractControl):{[key:string]:any;}|null=>{
17+
constemail:string=control.value;
18+
constdomain=email.substring(email.lastIndexOf('@')+1);
19+
if(email===''||domain.toLowerCase()===preferedDomain.toLowerCase())
20+
returnnull;
21+
else{
22+
return{'emailDomain':true};
23+
}
24+
}
25+
};
26+
staticpositiveNo(control:AbstractControl):{[key:string]:any}|null{
27+
constvalue:number=control.value;
28+
return(value>=0) ?null :{'positiveNo':true}
29+
}
30+
}

‎src/app/emp/employee.model.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
//import * as internal from "assert";
2+
3+
exportinterfaceIEmployee{
4+
id:number;
5+
fullName:string;
6+
email:string;
7+
phone?:string;
8+
skills:ISkill[];
9+
}
10+
11+
exportinterfaceISkill{
12+
skillName:string;
13+
expInYear:number;
14+
proficiency:string;
15+
}

‎src/app/emp/list-employee/list-employee.component.css‎

Whitespace-only changes.
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<tableclass="table table-bordered">
2+
<theadclass="thead-dark">
3+
<tr>
4+
<thscope="col">#</th>
5+
<thscope="col">Full Name</th>
6+
<thscope="col">Email</th>
7+
<thscope="col">Skill</th>
8+
<thscope="col">Action</th>
9+
</tr>
10+
</thead>
11+
<tbody>
12+
<tr*ngFor="let emp of employees">
13+
<thscope="row">{{emp.id}}</th>
14+
<td>{{emp.fullName}}</td>
15+
<td>{{emp.email}}</td>
16+
<td>{{emp.skills.length + (emp.skills.length> 1 ? ' skills':' skill')}}</td>
17+
<td>
18+
<divclass="btn-group btn-group-sm">
19+
<aclass="btn btn-primary"routerLink="/emp/put/{{emp.id}}">Edit</a>
20+
<!-- <button type="button" (click)="btnClick_Edit(emp.id)" class="btn btn-primary">Edit</button> -->
21+
<buttontype="button"(click)="btnClick_Del(emp.id)"class="btn btn-danger">Del</button>
22+
</div>
23+
</td>
24+
</tr>
25+
</tbody>
26+
</table>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp