Skip to content

Commit d96fd25

Browse files
masteropenmasteropen
authored
Merge pull request #5 from masteropen/angular_forms
Angular forms
2 parents aef2b5d + 626f645 commit d96fd25

14 files changed

+245
-3
lines changed

‎src/app/app.component.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<ul class="nav navbar-nav">
55
<li routerLinkActive="active"><a routerLink="auth">Authentification</a></li>
66
<li routerLinkActive="active"><a routerLink="appareils">Appareils</a></li>
7+
<li routerLinkActive="active"><a routerLink="edit">Nouvel appareil</a></li>
8+
<li routerLinkActive="active"><a routerLink="users">Utilisateurs</a></li>
79
</ul>
810
<div class="navbar-right">
911
<p>Vous êtes connecté depuis {{ secondes }} secondes !</p>

‎src/app/app.module.ts‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
22
import { NgModule } from '@angular/core';
33
import { AppComponent } from './app.component';
44
import { AppareilComponent } from './appareil/appareil.component';
5-
import { FormsModule } from '@angular/forms';
5+
import { FormsModule, ReactiveFormsModule} from '@angular/forms';
66
import { AppareilService } from './services/appareil.service';
77
import { AuthComponent } from './auth/auth.component';
88
import { AppareilViewComponent } from './appareil-view/appareil-view.component';
@@ -11,10 +11,17 @@ import { AuthService } from './services/auth.service';
1111
import { SingleAppareilComponent } from './single-appareil/single-appareil.component';
1212
import { FourOhFourComponent } from './four-oh-four/four-oh-four.component';
1313
import { AuthGuard } from './services/auth-guard.service';
14+
import { EditAppareilComponent } from './edit-appareil/edit-appareil.component';
15+
import { UserService } from './services/user.service';
16+
import { UserListComponent } from './user-list/user-list.component';
17+
import { NewUserComponent } from './new-user/new-user.component';
1418

1519
const appRoutes: Routes = [
1620
{ path: 'appareils', canActivate: [AuthGuard], component: AppareilViewComponent },
1721
{ path: 'appareils/:id', canActivate: [AuthGuard], component: SingleAppareilComponent },
22+
{ path: 'edit', canActivate: [AuthGuard], component: EditAppareilComponent },
23+
{ path: 'users', /*canActivate: [AuthGuard],*/ component: UserListComponent },
24+
{ path: 'new-user', /*canActivate: [AuthGuard],*/ component: NewUserComponent },
1825
{ path: 'auth', component: AuthComponent },
1926
{ path: '', component: AuthComponent },
2027
{ path: 'not-found', component: FourOhFourComponent },
@@ -28,17 +35,22 @@ const appRoutes: Routes = [
2835
AuthComponent,
2936
AppareilViewComponent,
3037
SingleAppareilComponent,
31-
FourOhFourComponent
38+
FourOhFourComponent,
39+
EditAppareilComponent,
40+
UserListComponent,
41+
NewUserComponent
3242
],
3343
imports: [
3444
BrowserModule,
3545
FormsModule,
46+
ReactiveFormsModule,
3647
RouterModule.forRoot(appRoutes)
3748
],
3849
providers: [
3950
AppareilService,
4051
AuthService,
41-
AuthGuard
52+
AuthGuard,
53+
UserService
4254
],
4355
bootstrap: [AppComponent]
4456
})

‎src/app/edit-appareil/edit-appareil.component.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!-- form by template method -->
2+
<div class="row">
3+
<div class="col-sm-8 col-sm-offset-2">
4+
<form (ngSubmit)="onSubmit(f)" #f="ngForm">
5+
<div class="form-group">
6+
<label for="name">
7+
Nom de l'appareil
8+
</label>
9+
<input type="text" id="name" class="form-control" name="name" ngModel required>
10+
</div>
11+
<div class="form-group">
12+
<label for="status">
13+
État de l'appareil
14+
</label>
15+
<select id="status" class="form-control" name="status" [ngModel]="defaultOnOff">
16+
<option value="allumé">Allumé</option>
17+
<option value="éteint">Éteint</option>
18+
</select>
19+
</div>
20+
<button class="btn btn-primary" type="submit" [disabled]="f.invalid">Enregistrer</button>
21+
</form>
22+
</div>
23+
</div>

‎src/app/edit-appareil/edit-appareil.component.scss‎

Whitespace-only changes.

‎src/app/edit-appareil/edit-appareil.component.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { NgForm } from '@angular/forms';
3+
import { AppareilService } from '../services/appareil.service';
4+
import { Router } from '@angular/router';
5+
6+
@Component({
7+
selector: 'app-edit-appareil',
8+
templateUrl: './edit-appareil.component.html',
9+
styleUrls: ['./edit-appareil.component.scss']
10+
})
11+
export class EditAppareilComponent implements OnInit {
12+
13+
defaultOnOff = 'éteint';
14+
15+
constructor(private appareilService: AppareilService,
16+
private router: Router) { }
17+
18+
ngOnInit(): void {
19+
}
20+
21+
onSubmit(form: NgForm) {
22+
const name = form.value['name'];
23+
const status = form.value['status'];
24+
this.appareilService.addAppareil(name, status);
25+
this.router.navigate(['/appareils']);
26+
}
27+
}

‎src/app/models/User.model.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export class User {
2+
constructor(
3+
public firstName: string,
4+
public lastName: string,
5+
public email: string,
6+
public drinkPreference: string,
7+
public hobbies?: string[]
8+
) {}
9+
}

‎src/app/new-user/new-user.component.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!-- form by reactive method -->
2+
<div class="col-sm-8 col-sm-offset-2">
3+
<form [formGroup]="userForm" (ngSubmit)="onSubmitForm()">
4+
<div class="form-group">
5+
<label for="firstName">Prénom</label>
6+
<input type="text" id="firstName" class="form-control" formControlName="firstName">
7+
</div>
8+
<div class="form-group">
9+
<label for="lastName">Nom</label>
10+
<input type="text" id="lastName" class="form-control" formControlName="lastName">
11+
</div>
12+
<div class="form-group">
13+
<label for="email">Adresse e-mail</label>
14+
<input type="text" id="email" class="form-control" formControlName="email">
15+
</div>
16+
<div class="form-group">
17+
<label for="drinkPreference">Quelle boisson préférez-vous ?</label>
18+
<select id="drinkPreference" class="form-control" formControlName="drinkPreference">
19+
<option value="jus d'orange">Jus d'orange</option>
20+
<option value="jus de mangue">Jus de mangue</option>
21+
</select>
22+
</div>
23+
<div formArrayName="hobbies">
24+
<h3>Vos hobbies</h3>
25+
<div class="form-group" *ngFor="let hobbyControl of getHobbies().controls; let i = index">
26+
<input type="text" class="form-control" [formControlName]="i">
27+
</div>
28+
<button type="button" class="btn btn-success" (click)="onAddHobby()">Ajouter</button>
29+
<button type="button" class="btn btn-danger" (click)="onRemoveHobby()">Supprimer</button>
30+
</div>
31+
<button type="submit" class="btn btn-primary" [disabled]="userForm.invalid">Soumettre</button>
32+
</form>
33+
</div>

‎src/app/new-user/new-user.component.scss‎

Whitespace-only changes.

‎src/app/new-user/new-user.component.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
3+
import {UserService} from '../services/user.service';
4+
import {Router} from '@angular/router';
5+
import {User} from '../models/User.model';
6+
7+
@Component({
8+
selector: 'app-new-user',
9+
templateUrl: './new-user.component.html',
10+
styleUrls: ['./new-user.component.scss']
11+
})
12+
export class NewUserComponent implements OnInit {
13+
14+
userForm: FormGroup;
15+
16+
constructor(private formBuilder: FormBuilder,
17+
private userService: UserService,
18+
private router: Router
19+
) { }
20+
21+
ngOnInit(): void {
22+
this.initForm();
23+
}
24+
25+
initForm() {
26+
this.userForm = this.formBuilder.group({
27+
firstName: ['', Validators.required],
28+
lastName: ['', Validators.required],
29+
email: ['', [Validators.required, Validators.email]],
30+
drinkPreference: ['', Validators.required],
31+
hobbies: this.formBuilder.array([])
32+
});
33+
}
34+
35+
onSubmitForm() {
36+
const formValue = this.userForm.value;
37+
const newUser = new User(
38+
formValue['firstName'],
39+
formValue['lastName'],
40+
formValue['email'],
41+
formValue['drinkPreference'],
42+
formValue['hobbies'] ? formValue['hobbies'] : []
43+
);
44+
this.userService.addUser(newUser);
45+
this.router.navigate(['/users']);
46+
}
47+
48+
getHobbies(): FormArray {
49+
return this.userForm.get('hobbies') as FormArray;
50+
}
51+
52+
onAddHobby() {
53+
const newHobbyControl = this.formBuilder.control(null, Validators.required);
54+
this.getHobbies().push(newHobbyControl);
55+
}
56+
57+
onRemoveHobby() {
58+
this.getHobbies().removeAt(-1);
59+
}
60+
}

‎src/app/services/appareil.service.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,4 +53,17 @@ export class AppareilService {
5353
}
5454
);
5555
}
56+
57+
addAppareil(name: string, status: string) {
58+
const appareilObject = {
59+
id: 0,
60+
name: '',
61+
status: ''
62+
};
63+
appareilObject.name = name;
64+
appareilObject.status = status;
65+
appareilObject.id = this.appareils[(this.appareils.length - 1)].id + 1;
66+
this.appareils.push(appareilObject);
67+
this.emitAppareilSubject();
68+
}
5669
}

0 commit comments

Comments
 (0)