2dea-half

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"
       }

demo/src/app/app.html

@@ -8,6 +8,8 @@
 <app-user-card-component></app-user-card-component>
 
 <app-form-profile></app-form-profile>
-  -->
+
 <app-template-driven-form></app-template-driven-form>
+  -->
+<app-registration-form></app-registration-form>
 </main>

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'
 })

demo/src/app/registration-form/registration-form.css

@@ -0,0 +1,3 @@
+small{
+  color:red
+}

demo/src/app/registration-form/registration-form.html

@@ -0,0 +1,47 @@
+<h1>Registration Form!</h1>
+<form [formGroup]="regForm" (ngSubmit)="onSubmit()">
+  <div class="mb-3">
+    <label for="email" class="form-label">Email</label>
+    <input
+      type="email"
+      class="form-control"
+      placeholder=""
+      formControlName="email"
+    />
+    @if (email?.invalid && email?.dirty){
+      <small class="form-text text-muted">Enter a valid email</small>
+    }
+  </div>
+
+  <div class="mb-3 row">
+
+    <div class="col">
+      <label for="password" class="form-label">Password</label>
+      <input
+        type="password"
+        class="form-control"
+        placeholder=""
+        formControlName="password"
+      />
+      <small class="form-text text-muted">Must be at least 6 Characters long</small>
+      <small class="form-text text-muted">Must contain at least a special character ($,_!) and a number</small>
+      
+    </div>
+    
+    <div class="col">
+      <label for="password" class="form-label">Confirm Password</label>
+      <input
+        type="password"
+        class="form-control"
+        placeholder=""
+        formControlName="confirmPassword"
+      />
+      <small class="form-text text-muted">Password must be the same</small>
+    </div>
+    
+  </div>
+  
+  <hr/>
+  <button type="button" class="btn btn-warning">Reset</button>
+  <button type="submit" class="btn btn-success">Submit</button>
+</form>

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<RegistrationForm>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RegistrationForm]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RegistrationForm);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<string>("", [Validators.required, Validators.email]),
+    password: new FormControl<string>("", [Validators.required, Validators.minLength(6)]),
+    confirmPassword: new FormControl<string>("", Validators.required),
+    
+  })
+
+  onSubmit() {
+    console.log(this.regForm.controls)
+  }
+
+  get email(){
+    return this.regForm.get('email')
+  }
+}