From ef77fea215494b8e17ceee2a3be35feaeff0c128 Mon Sep 17 00:00:00 2001 From: Fedez1879 Date: Fri, 5 Dec 2025 11:16:07 +0100 Subject: [PATCH] 2dea-half --- demo/package-lock.json | 29 +++++++++++- demo/src/app/app.html | 4 +- demo/src/app/app.ts | 3 +- .../registration-form/registration-form.css | 3 ++ .../registration-form/registration-form.html | 47 +++++++++++++++++++ .../registration-form.spec.ts | 23 +++++++++ .../registration-form/registration-form.ts | 26 ++++++++++ 7 files changed, 131 insertions(+), 4 deletions(-) create mode 100644 demo/src/app/registration-form/registration-form.css create mode 100644 demo/src/app/registration-form/registration-form.html create mode 100644 demo/src/app/registration-form/registration-form.spec.ts create mode 100644 demo/src/app/registration-form/registration-form.ts diff --git a/demo/package-lock.json b/demo/package-lock.json index 194f71c..89fb713 100644 --- a/demo/package-lock.json +++ b/demo/package-lock.json @@ -465,6 +465,7 @@ "resolved": "https://registry.npmjs.org/@angular/common/-/common-21.0.2.tgz", "integrity": "sha512-dOi7w0dsUCJ5ZFnXD2eR/8LWy9/XAzXuo9zU6zu7qP4vimjTQRs11IawnuC+jaAQtCFiySshzEPPsuAw9bPkOA==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -481,6 +482,7 @@ "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-21.0.2.tgz", "integrity": "sha512-Rs69yqT1M+l0DqAAZcGDt2TntKAPyldEViq3GQHbkM1W4f/hoRgBRsE6StxvP6wszW6VVHH3uQQdyeZV8Z4rpw==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -494,6 +496,7 @@ "integrity": "sha512-+6lyvDV0rY1qbc9+rzFCBZDGCfJU0ah3p+4Tu0YYgKRbpbwvqj/O4cG1mLknEuQ2G61Y/tTKnTa4ng1XNtqVyw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/core": "7.28.4", "@jridgewell/sourcemap-codec": "^1.4.14", @@ -526,6 +529,7 @@ "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.0.2.tgz", "integrity": "sha512-jj2lYmwMKYY7tmZ7ml8rXJRKwkVMJamFIf6VQuIlSFK79Pmn6AeUhZwDlrAmK7sY9kakEKUmslSg0XLL3bfiyw==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -570,6 +574,7 @@ "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.0.2.tgz", "integrity": "sha512-Qygk215mRK2S1tvD6B5dy3ekMidGmmLktxr5i01YC8synHYcex7HK18JcWuCrFbY6NbCnHsMD3bYi0mwhag+Sg==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -592,6 +597,7 @@ "resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-21.0.2.tgz", "integrity": "sha512-kJ2sX96Jhh1K+1XE0h2ow05GZafCtJ6bMRy7LbWdyN4xze7VG/4XPxUD0zb091c3a+1tEt3HAEWbjekWNM57xg==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0", "xhr2": "^0.2.0" @@ -612,6 +618,7 @@ "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.0.2.tgz", "integrity": "sha512-fm02ICYhqY+0xO+Skn7UsMRepgbh6vermKRLf2mVZYZl6bNWvq0WiolB2y34ntOkh3ZsbRbmMNhL8auLMU8mPA==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -630,6 +637,7 @@ "resolved": "https://registry.npmjs.org/@angular/ssr/-/ssr-21.0.1.tgz", "integrity": "sha512-rbShURMPg7Lca81cUJGOFN3vGVVVESOj4HOwtemjex75R+AEKC7Pm5q0FMhlrc+Xr0DHB1M9gMSEbmUewcByrg==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -731,6 +739,7 @@ "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", @@ -1081,6 +1090,7 @@ } ], "license": "MIT", + "peer": true, "engines": { "node": ">=18" }, @@ -1124,6 +1134,7 @@ } ], "license": "MIT", + "peer": true, "engines": { "node": ">=18" } @@ -1840,6 +1851,7 @@ "integrity": "sha512-X7/+dG9SLpSzRkwgG5/xiIzW0oMrV3C0HOa7YHG1WnrLK+vCQHfte4k/T80059YBdei29RBC3s+pSMvPJDU9/A==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@inquirer/checkbox": "^4.3.0", "@inquirer/confirm": "^5.1.19", @@ -3930,7 +3942,8 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz", "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@tufjs/canonical-json": { "version": "2.0.0", @@ -4067,6 +4080,7 @@ "integrity": "sha512-ZsJzA5thDQMSQO788d7IocwwQbI8B5OPzmqNvpf3NY/+MHDAS759Wo0gd2WQeXYt5AAAQjzcrTVC6SKCuYgoCQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~6.21.0" } @@ -4525,6 +4539,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", @@ -4687,6 +4702,7 @@ "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "readdirp": "^4.0.1" }, @@ -5370,6 +5386,7 @@ "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz", "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==", "license": "MIT", + "peer": true, "dependencies": { "accepts": "^2.0.0", "body-parser": "^2.2.1", @@ -6060,6 +6077,7 @@ "integrity": "sha512-454TI39PeRDW1LgpyLPyURtB4Zx1tklSr6+OFOipsxGUH1WMTvk6C65JQdrj455+DP2uJ1+veBEHTGFKWVLFoA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@acemir/cssom": "^0.9.23", "@asamuzakjp/dom-selector": "^6.7.4", @@ -6160,6 +6178,7 @@ "integrity": "sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "cli-truncate": "^5.0.0", "colorette": "^2.0.20", @@ -7620,6 +7639,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" } @@ -8234,7 +8254,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": "4.0.0", @@ -8271,6 +8292,7 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -8408,6 +8430,7 @@ "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -8967,6 +8990,7 @@ "integrity": "sha512-n1RxDp8UJm6N0IbJLQo+yzLZ2sQCDyl1o0LeugbPWf8+8Fttp29GghsQBjYJVmWq3gBFfe9Hs1spR44vovn2wA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@vitest/expect": "4.0.15", "@vitest/mocker": "4.0.15", @@ -9412,6 +9436,7 @@ "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==", "dev": true, "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/demo/src/app/app.html b/demo/src/app/app.html index fa9bd71..dd4bdf5 100644 --- a/demo/src/app/app.html +++ b/demo/src/app/app.html @@ -8,6 +8,8 @@ - --> + + --> + \ No newline at end of file diff --git a/demo/src/app/app.ts b/demo/src/app/app.ts index 0f30760..1336a40 100644 --- a/demo/src/app/app.ts +++ b/demo/src/app/app.ts @@ -5,10 +5,11 @@ import { ProgressBar } from "./progress-bar/progress-bar"; import { UserCardComponent } from './user-card-component/user-card-component'; import { FormProfile } from './form-profile/form-profile'; import { TemplateDrivenForm } from './template-driven-form/template-driven-form'; +import { RegistrationForm } from './registration-form/registration-form'; @Component({ selector: 'app-root', - imports: [TemplateDrivenForm], + imports: [RegistrationForm], templateUrl: './app.html', styleUrl: './app.css' }) diff --git a/demo/src/app/registration-form/registration-form.css b/demo/src/app/registration-form/registration-form.css new file mode 100644 index 0000000..b6f9cc1 --- /dev/null +++ b/demo/src/app/registration-form/registration-form.css @@ -0,0 +1,3 @@ +small{ + color:red +} \ No newline at end of file diff --git a/demo/src/app/registration-form/registration-form.html b/demo/src/app/registration-form/registration-form.html new file mode 100644 index 0000000..bf63343 --- /dev/null +++ b/demo/src/app/registration-form/registration-form.html @@ -0,0 +1,47 @@ +

Registration Form!

+
+
+ + + @if (email?.invalid && email?.dirty){ + Enter a valid email + } +
+ +
+ +
+ + + Must be at least 6 Characters long + Must contain at least a special character ($,_!) and a number + +
+ +
+ + + Password must be the same +
+ +
+ +
+ + +
diff --git a/demo/src/app/registration-form/registration-form.spec.ts b/demo/src/app/registration-form/registration-form.spec.ts new file mode 100644 index 0000000..fbf47c3 --- /dev/null +++ b/demo/src/app/registration-form/registration-form.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RegistrationForm } from './registration-form'; + +describe('RegistrationForm', () => { + let component: RegistrationForm; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [RegistrationForm] + }) + .compileComponents(); + + fixture = TestBed.createComponent(RegistrationForm); + component = fixture.componentInstance; + await fixture.whenStable(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/demo/src/app/registration-form/registration-form.ts b/demo/src/app/registration-form/registration-form.ts new file mode 100644 index 0000000..7f4d840 --- /dev/null +++ b/demo/src/app/registration-form/registration-form.ts @@ -0,0 +1,26 @@ +import { Component } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; + +@Component({ + selector: 'app-registration-form', + imports: [ReactiveFormsModule], + templateUrl: './registration-form.html', + styleUrl: './registration-form.css', +}) +export class RegistrationForm { + + regForm = new FormGroup({ + email: new FormControl("", [Validators.required, Validators.email]), + password: new FormControl("", [Validators.required, Validators.minLength(6)]), + confirmPassword: new FormControl("", Validators.required), + + }) + + onSubmit() { + console.log(this.regForm.controls) + } + + get email(){ + return this.regForm.get('email') + } +}