Merge pull request #5 from masteropen/angular_forms

Angular forms

Author: masteropen

src/app/app.component.html

@@ -4,6 +4,8 @@
       <ul class="nav navbar-nav">
         <li routerLinkActive="active"><a routerLink="auth">Authentification</a></li>
         <li routerLinkActive="active"><a routerLink="appareils">Appareils</a></li>
+        <li routerLinkActive="active"><a routerLink="edit">Nouvel appareil</a></li>
+        <li routerLinkActive="active"><a routerLink="users">Utilisateurs</a></li>
       </ul>
       <div class="navbar-right">
         <p>Vous êtes connecté depuis {{ secondes }} secondes !</p>

src/app/app.module.ts

@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { AppareilComponent } from './appareil/appareil.component';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule} from '@angular/forms';
 import { AppareilService } from './services/appareil.service';
 import { AuthComponent } from './auth/auth.component';
 import { AppareilViewComponent } from './appareil-view/appareil-view.component';
@@ -11,10 +11,17 @@ import { AuthService } from './services/auth.service';
 import { SingleAppareilComponent } from './single-appareil/single-appareil.component';
 import { FourOhFourComponent } from './four-oh-four/four-oh-four.component';
 import { AuthGuard } from './services/auth-guard.service';
+import { EditAppareilComponent } from './edit-appareil/edit-appareil.component';
+import { UserService } from './services/user.service';
+import { UserListComponent } from './user-list/user-list.component';
+import { NewUserComponent } from './new-user/new-user.component';
 
 const appRoutes: Routes = [
     { path: 'appareils', canActivate: [AuthGuard], component: AppareilViewComponent },
     { path: 'appareils/:id', canActivate: [AuthGuard], component: SingleAppareilComponent },
+    { path: 'edit', canActivate: [AuthGuard], component: EditAppareilComponent },
+    { path: 'users', /*canActivate: [AuthGuard],*/ component: UserListComponent },
+    { path: 'new-user', /*canActivate: [AuthGuard],*/ component: NewUserComponent },
     { path: 'auth', component: AuthComponent },
     { path: '', component: AuthComponent },
     { path: 'not-found', component: FourOhFourComponent },
@@ -28,17 +35,22 @@ const appRoutes: Routes = [
     AuthComponent,
     AppareilViewComponent,
     SingleAppareilComponent,
-    FourOhFourComponent
+    FourOhFourComponent,
+    EditAppareilComponent,
+    UserListComponent,
+    NewUserComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
+    ReactiveFormsModule,
     RouterModule.forRoot(appRoutes)
   ],
   providers: [
       AppareilService,
       AuthService,
-      AuthGuard
+      AuthGuard,
+      UserService
   ],
   bootstrap: [AppComponent]
 })

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

@@ -0,0 +1,23 @@
+<!-- form by template method -->
+<div class="row">
+    <div class="col-sm-8 col-sm-offset-2">
+        <form (ngSubmit)="onSubmit(f)" #f="ngForm">
+            <div class="form-group">
+                <label for="name">
+                    Nom de l'appareil
+                </label>
+                <input type="text" id="name" class="form-control" name="name" ngModel required>
+            </div>
+            <div class="form-group">
+                <label for="status">
+                    État de l'appareil
+                </label>
+                <select id="status" class="form-control" name="status" [ngModel]="defaultOnOff">
+                    <option value="allumé">Allumé</option>
+                    <option value="éteint">Éteint</option>
+                </select>
+            </div>
+            <button class="btn btn-primary" type="submit" [disabled]="f.invalid">Enregistrer</button>
+        </form>
+    </div>
+</div>

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

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { AppareilService } from '../services/appareil.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-edit-appareil',
+  templateUrl: './edit-appareil.component.html',
+  styleUrls: ['./edit-appareil.component.scss']
+})
+export class EditAppareilComponent implements OnInit {
+
+  defaultOnOff = 'éteint';
+
+  constructor(private appareilService: AppareilService,
+              private router: Router) { }
+
+  ngOnInit(): void {
+  }
+
+  onSubmit(form: NgForm) {
+    const name = form.value['name'];
+    const status = form.value['status'];
+    this.appareilService.addAppareil(name, status);
+    this.router.navigate(['/appareils']);
+  }
+}

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

@@ -0,0 +1,9 @@
+export class User {
+    constructor(
+        public firstName: string,
+        public lastName: string,
+        public email: string,
+        public drinkPreference: string,
+        public hobbies?: string[]
+    ) {}
+}

src/app/models/User.model.ts

@@ -0,0 +1,33 @@
+<!-- form by reactive method -->
+<div class="col-sm-8 col-sm-offset-2">
+    <form [formGroup]="userForm" (ngSubmit)="onSubmitForm()">
+        <div class="form-group">
+            <label for="firstName">Prénom</label>
+            <input type="text" id="firstName" class="form-control" formControlName="firstName">
+        </div>
+        <div class="form-group">
+            <label for="lastName">Nom</label>
+            <input type="text" id="lastName" class="form-control" formControlName="lastName">
+        </div>
+        <div class="form-group">
+            <label for="email">Adresse e-mail</label>
+            <input type="text" id="email" class="form-control" formControlName="email">
+        </div>
+        <div class="form-group">
+            <label for="drinkPreference">Quelle boisson préférez-vous ?</label>
+            <select id="drinkPreference" class="form-control" formControlName="drinkPreference">
+                <option value="jus d'orange">Jus d'orange</option>
+                <option value="jus de mangue">Jus de mangue</option>
+            </select>
+        </div>
+        <div formArrayName="hobbies">
+            <h3>Vos hobbies</h3>
+            <div class="form-group" *ngFor="let hobbyControl of getHobbies().controls; let i = index">
+                <input type="text" class="form-control" [formControlName]="i">
+            </div>
+            <button type="button" class="btn btn-success" (click)="onAddHobby()">Ajouter</button>
+            <button type="button" class="btn btn-danger" (click)="onRemoveHobby()">Supprimer</button>
+        </div>
+        <button type="submit" class="btn btn-primary" [disabled]="userForm.invalid">Soumettre</button>
+    </form>
+</div>

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

@@ -0,0 +1,60 @@
+import { Component, OnInit } from '@angular/core';
+import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {UserService} from '../services/user.service';
+import {Router} from '@angular/router';
+import {User} from '../models/User.model';
+
+@Component({
+  selector: 'app-new-user',
+  templateUrl: './new-user.component.html',
+  styleUrls: ['./new-user.component.scss']
+})
+export class NewUserComponent implements OnInit {
+
+  userForm: FormGroup;
+
+  constructor(private formBuilder: FormBuilder,
+              private userService: UserService,
+              private router: Router
+              ) { }
+
+  ngOnInit(): void {
+    this.initForm();
+  }
+
+  initForm() {
+    this.userForm = this.formBuilder.group({
+      firstName: ['', Validators.required],
+      lastName: ['', Validators.required],
+      email: ['', [Validators.required, Validators.email]],
+      drinkPreference: ['', Validators.required],
+      hobbies: this.formBuilder.array([])
+    });
+  }
+
+  onSubmitForm() {
+    const formValue = this.userForm.value;
+    const newUser = new User(
+        formValue['firstName'],
+        formValue['lastName'],
+        formValue['email'],
+        formValue['drinkPreference'],
+        formValue['hobbies'] ? formValue['hobbies'] : []
+    );
+    this.userService.addUser(newUser);
+    this.router.navigate(['/users']);
+  }
+
+  getHobbies(): FormArray {
+    return this.userForm.get('hobbies') as FormArray;
+  }
+
+  onAddHobby() {
+    const newHobbyControl = this.formBuilder.control(null, Validators.required);
+    this.getHobbies().push(newHobbyControl);
+  }
+
+  onRemoveHobby() {
+    this.getHobbies().removeAt(-1);
+  }
+}

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

@@ -53,4 +53,17 @@ export class AppareilService {
             }
         );
     }
+
+    addAppareil(name: string, status: string) {
+        const appareilObject = {
+            id: 0,
+            name: '',
+            status: ''
+        };
+        appareilObject.name = name;
+        appareilObject.status = status;
+        appareilObject.id = this.appareils[(this.appareils.length - 1)].id + 1;
+        this.appareils.push(appareilObject);
+        this.emitAppareilSubject();
+    }
 }

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

@@ -0,0 +1,20 @@
+import { User } from '../models/User.model';
+import { Subject } from 'rxjs/Subject';
+
+export class UserService {
+
+    private users = [
+        new User('Will', 'Alexander', 'will@will.com', 'jus d\'orange', ['coder', 'boire du café'])
+    ];
+
+    userSubject = new Subject<User[]>();
+
+    emitUsers() {
+        this.userSubject.next(this.users.slice());
+    }
+
+    addUser(user: User) {
+        this.users.push(user);
+        this.emitUsers();
+    }
+}

src/app/services/appareil.service.ts

@@ -0,0 +1,12 @@
+<ul class="list-group">
+    <li class="list-group-item" *ngFor="let user of users">
+        <h3>{{ user.firstName }} {{ user.lastName }}</h3>
+        <p>{{ user.email }}</p>
+        <p>Cette persone préfère le {{ user.drinkPreference }}</p>
+        <p *ngIf="user.hobbies && user.hobbies.length > 0">
+            Cette personne a des hobbies !
+            <span *ngFor="let hobby of user.hobbies">{{ hobby }} - </span>
+        </p>
+    </li>
+    <a routerLink="/new-user">Nouvel utilisateur</a>
+</ul>

src/app/services/user.service.ts

@@ -0,0 +1,31 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs/Subscription';
+import { User } from '../models/User.model';
+import { UserService } from '../services/user.service';
+
+@Component({
+  selector: 'app-user-list',
+  templateUrl: './user-list.component.html',
+  styleUrls: ['./user-list.component.scss']
+})
+export class UserListComponent implements OnInit, OnDestroy {
+
+  users: User[];
+
+  userSubscription: Subscription;
+
+  constructor(private userService: UserService) { }
+
+  ngOnInit() {
+    this.userSubscription = this.userService.userSubject.subscribe(
+        (users: User[]) => {
+          this.users = users;
+        }
+    );
+    this.userService.emitUsers();
+  }
+
+  ngOnDestroy() {
+    this.userSubscription.unsubscribe();
+  }
+}