create form to add new appareils

Author: majid noureddine

src/app/app.component.html

@@ -4,6 +4,7 @@
       <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>
       </ul>
       <div class="navbar-right">
         <p>Vous êtes connecté depuis {{ secondes }} secondes !</p>

src/app/app.module.ts

@@ -11,10 +11,12 @@ 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';
 
 const appRoutes: Routes = [
     { path: 'appareils', canActivate: [AuthGuard], component: AppareilViewComponent },
     { path: 'appareils/:id', canActivate: [AuthGuard], component: SingleAppareilComponent },
+    { path: 'edit', canActivate: [AuthGuard], component: EditAppareilComponent },
     { path: 'auth', component: AuthComponent },
     { path: '', component: AuthComponent },
     { path: 'not-found', component: FourOhFourComponent },
@@ -28,7 +30,8 @@ const appRoutes: Routes = [
     AuthComponent,
     AppareilViewComponent,
     SingleAppareilComponent,
-    FourOhFourComponent
+    FourOhFourComponent,
+    EditAppareilComponent
   ],
   imports: [
     BrowserModule,

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

@@ -0,0 +1,22 @@
+<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>
+            </div>
+            <div class="form-group">
+                <label for="status">
+                    État de l'appareil
+                </label>
+                <select id="status" class="form-control" name="status" ngModel>
+                    <option value="allumé">Allumé</option>
+                    <option value="éteint">Éteint</option>
+                </select>
+            </div>
+            <button class="btn btn-primary" type="submit">Enregistrer</button>
+        </form>
+    </div>
+</div>

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

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { NgForm } from '@angular/forms';
+
+@Component({
+  selector: 'app-edit-appareil',
+  templateUrl: './edit-appareil.component.html',
+  styleUrls: ['./edit-appareil.component.scss']
+})
+export class EditAppareilComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  onSubmit(form: NgForm) {
+    console.log(form.value);
+  }
+}