created components with forms for project

package-lock.json

@@ -498,6 +498,7 @@
       "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.10.tgz",
       "integrity": "sha512-12fEzvKbEqjqy1fSk9DMYlJz6dF1MJVXuC5BB+oWWJpd+2lfh4xJ62pkvvLGAICI89hfM5n9Cy5kWnXwnqPZsA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -514,6 +515,7 @@
       "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.10.tgz",
       "integrity": "sha512-cW939Lr8GZjPSYfbQKIDNrUaHWmn2M+zBbERThfq5skLuY+xM60bJFv4NqBekfX6YqKLCY62ilUZlnImYIXaqA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -527,6 +529,7 @@
       "integrity": "sha512-9BemvpFxA26yIVdu8ROffadMkEdlk/AQQ2Jb486w7RPkrvUQ0pbEJukhv9aryJvhbMopT66S5H/j4ipOUMzmzQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/core": "7.28.3",
         "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -559,6 +562,7 @@
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.10.tgz",
       "integrity": "sha512-g99Qe+NOVo72OLxowVF9NjCckswWYHmvO7MgeiZTDJbTjF9tXH96dMx7AWq76/GUinV10sNzDysVW16NoAbCRQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -584,6 +588,7 @@
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-20.3.10.tgz",
       "integrity": "sha512-9yWr51EUauTEINB745AaHwZNTHLpXIm4uxuykxzOg+g2QskEgVfH26uS8G2ogdNuwYpB8wnsXWr34qhM3qgOWw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -602,6 +607,7 @@
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.10.tgz",
       "integrity": "sha512-UV8CGoB5P3FmJciI3/I/n3L7C3NVgGh7bIlZ1BaB/qJDtv0Wq0rRAGwmT/Z3gwmrRtfHZWme7/CeQ2CYJmMyUQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -624,6 +630,7 @@
       "resolved": "https://registry.npmjs.org/@angular/router/-/router-20.3.10.tgz",
       "integrity": "sha512-Z03cfH1jgQ7XMDJj4R8qAGqivcvhdG3wYBwaiN1K1ODBgPhbFKNeD4stKqYp7xBNtswmM2O2jMxrL/Djwju4Gg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -705,6 +712,7 @@
       "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.27.1",
@@ -1663,6 +1671,7 @@
       "integrity": "sha512-nqhDw2ZcAUrKNPwhjinJny903bRhI0rQhiDz1LksjeRxqa36i3l75+4iXbOy0rlDpLJGxqtgoPavQjmmyS5UJw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@inquirer/checkbox": "^4.2.1",
         "@inquirer/confirm": "^5.1.14",
@@ -4071,6 +4080,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.19",
         "caniuse-lite": "^1.0.30001751",
@@ -4911,6 +4921,7 @@
       "integrity": "sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.0",
@@ -5734,6 +5745,7 @@
       "integrity": "sha512-j1n1IuTX1VQjIy3tT7cyGbX7nvQOsFLoIqobZv4ttI5axP923gA44zUj6miiA6R5Aoms4sEGVIIcucXUbRI14g==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "copy-anything": "^2.0.1",
         "parse-node-version": "^1.0.1",
@@ -6021,6 +6033,7 @@
       "integrity": "sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cli-truncate": "^4.0.0",
         "colorette": "^2.0.20",
@@ -7672,6 +7685,7 @@
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
       "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -7710,6 +7724,7 @@
       "integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -8371,7 +8386,8 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
+      "license": "0BSD",
+      "peer": true
     },
     "node_modules/tuf-js": {
       "version": "3.1.0",
@@ -8409,6 +8425,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -8531,6 +8548,7 @@
       "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -8902,6 +8920,7 @@
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
@@ -8920,7 +8939,8 @@
       "version": "0.15.1",
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
       "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     }
   }
 }

src/app/components/create-author/create-author.html

@@ -0,0 +1 @@
+<p>create-author works!</p>

src/app/components/create-author/create-author.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-create-author',
+  imports: [],
+  templateUrl: './create-author.html',
+  styleUrl: './create-author.css',
+})
+export class CreateAuthor {
+
+}

src/app/components/create-book/create-book.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
 import {NzFormModule} from "ng-zorro-antd/form";
-import {FormControl, FormGroup, Validators} from "@angular/forms";
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
 
 @Component({
   selector: 'app-create-book',
-    imports: [NzFormModule],
+    imports: [NzFormModule, NzFlexDirective, ReactiveFormsModule],
   templateUrl: './create-book.html',
   styleUrl: './create-book.css',
 })

src/app/components/create-loan/create-loan.html

@@ -0,0 +1 @@
+<p>create-loan works!</p>

src/app/components/create-loan/create-loan.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-create-loan',
+  imports: [],
+  templateUrl: './create-loan.html',
+  styleUrl: './create-loan.css',
+})
+export class CreateLoan {
+
+}

src/app/components/create-user/create-user.html

@@ -0,0 +1 @@
+<p>create-user works!</p>

src/app/components/create-user/create-user.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-create-user',
+  imports: [],
+  templateUrl: './create-user.html',
+  styleUrl: './create-user.css',
+})
+export class CreateUser {
+
+}

src/app/components/update-author/update-author.html

@@ -0,0 +1 @@
+<p>update-author works!</p>

src/app/components/update-author/update-author.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-update-author',
+  imports: [],
+  templateUrl: './update-author.html',
+  styleUrl: './update-author.css',
+})
+export class UpdateAuthor {
+
+}

src/app/components/update-book/update-book.html

@@ -0,0 +1,37 @@
+<form nz-form nzLayout="horizontal" [formGroup]="updateBookForm" (ngSubmit)="submitForm()">
+    <nz-form-item>
+        <nz-form-label nzSpan="4" nzRequired>
+            Titre
+        </nz-form-label>
+
+        <nz-form-control nzSpan="20" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Titre du livre" formControlName="title">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+        <nz-form-label nzSpan="4" nzRequired>
+            Date de publication
+        </nz-form-label>
+
+        <nz-form-control nzSpan="20" nzErrorTip="Ce champ est requis">
+            <input nz-input type="number" placeholder="2005" formControlName="releaseYear">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+        <nz-form-label nzSpan="4" nzRequired>
+            Auteur
+        </nz-form-label>
+
+        <nz-form-control nzSpan="20" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Auteur" formControlName="author">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-flex nzJustify="end">
+        <button nz-button nzType="primary" (click)="submitForm()">
+            Modifier
+        </button>
+    </nz-flex>
+</form>

src/app/components/update-book/update-book.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import {NzFormModule} from "ng-zorro-antd/form";
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+
+@Component({
+  selector: 'app-update-book',
+  imports: [NzFormModule, NzFlexDirective, ReactiveFormsModule],
+  templateUrl: './update-book.html',
+  styleUrl: './update-book.css',
+})
+export class UpdateBook {
+    updateBookForm = new FormGroup({
+        title: new FormControl<string>(null, [Validators.required]),
+        releaseYear: new FormControl<string>(null, [Validators.required]),
+        author: new FormControl<string>(null, [Validators.required])
+    })
+
+    submitForm() {
+        // Pour annuler si le formulaire est invalide
+        if (this.updateBookForm.invalid) return;
+
+        // Pour obtenir la valeur du formulaire
+        console.log(this.updateBookForm.getRawValue())
+
+        // Pour vider le formulaire
+        this.updateBookForm.reset()
+    }
+}

src/app/components/update-loan/update-loan.html

@@ -0,0 +1 @@
+<p>update-loan works!</p>

src/app/components/update-loan/update-loan.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-update-loan',
+  imports: [],
+  templateUrl: './update-loan.html',
+  styleUrl: './update-loan.css',
+})
+export class UpdateLoan {
+
+}

src/app/components/update-user/update-user.html

@@ -0,0 +1 @@
+<p>update-user works!</p>

src/app/components/update-user/update-user.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-update-user',
+  imports: [],
+  templateUrl: './update-user.html',
+  styleUrl: './update-user.css',
+})
+export class UpdateUser {
+
+}

src/app/pages/welcome/welcome.ts

@@ -3,9 +3,7 @@ import {CreateBook} from "../../components/create-book/create-book";
 
 @Component({
   selector: 'app-welcome',
-    imports: [
-        CreateBook
-    ],
+    imports: [],
   templateUrl: './welcome.html',
   styleUrl: './welcome.css'
 })