angular form by reactive method

Author: majid noureddine

src/app/app.component.html

@@ -5,6 +5,7 @@
         <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';
@@ -12,11 +12,16 @@ import { SingleAppareilComponent } from './single-appareil/single-appareil.compo
 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 },
@@ -31,17 +36,21 @@ const appRoutes: Routes = [
     AppareilViewComponent,
     SingleAppareilComponent,
     FourOhFourComponent,
-    EditAppareilComponent
+    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

@@ -1,3 +1,4 @@
+<!-- form by template method -->
 <div class="row">
     <div class="col-sm-8 col-sm-offset-2">
         <form (ngSubmit)="onSubmit(f)" #f="ngForm">

src/app/models/User.model.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/new-user/new-user.component.html

@@ -0,0 +1,25 @@
+<!-- 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>
+        <button type="submit" class="btn btn-primary">Soumettre</button>
+    </form>
+</div>

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

@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import {FormBuilder, FormGroup} 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: '',
+      lastName: '',
+      email: '',
+      drinkPreference: ''
+    });
+  }
+
+  onSubmitForm() {
+    const formValue = this.userForm.value;
+    const newUser = new User(
+        formValue['firstName'],
+        formValue['lastName'],
+        formValue['email'],
+        formValue['drinkPreference']
+    );
+    this.userService.addUser(newUser);
+    this.router.navigate(['/users']);
+  }
+}

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/user.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>