form validation error query

frontend/src/app/components/auth/register/register.component.html

@@ -16,8 +16,10 @@
         placeholder="Email Address"
         autocomplete="email"
         [(ngModel)]="authData.mail"
+        disabled
         required
       />
+      <div class="error-msg"></div>
       <input
         type="password"
         id="password"
@@ -26,8 +28,15 @@
         placeholder="Enter a password"
         autocomplete="new-password"
         [(ngModel)]="authData.password"
+        pattern="[^<>]*"
+        minlength="6"
         required
       />
+      <div class="error-msg">
+        @if (authData.password.length < 6 && password.touched) {
+        <p>Password is too short, min 6 characters</p>
+        }
+      </div>
       <input
         type="password"
         id="passwordConfirm"
@@ -36,8 +45,16 @@
         placeholder="Confirm password"
         autocomplete="new-password"
         [(ngModel)]="authData.passwordConfirm"
+        pattern="[^<>]*"
+        minlength="6"
         required
       />
+      <div class="error-msg">
+        @if (authData.password !== authData.passwordConfirm &&
+        passwordConfirm.touched) {
+        <p>The passwords do not match</p>
+        }
+      </div>
       <app-btn-large
         [value]="'Get Started'"
         [disabled]="

frontend/src/app/components/auth/register/register.component.scss

@@ -37,12 +37,25 @@ section {
   }
 }
 
+.error-msg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding: 6px;
+  width: 120%;
+  p {
+    color: $red;
+    font-size: 12px !important;
+    font-weight: 400 !important;
+  }
+}
+
 .register-form {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  gap: 32px;
   input {
     width: 90%;
     padding: 12px 18px;

frontend/src/app/components/auth/register/register.component.ts

@@ -11,7 +11,7 @@ import { FormsModule, NgForm } from '@angular/forms';
 })
 export class RegisterComponent {
   authData = {
-    mail: '',
+    mail: 'test@test.de',
     password: '',
     passwordConfirm: '',
   };

frontend/src/assets/style/colors.scss

@@ -3,3 +3,4 @@ $white: #fff;
 $black: #000;
 $gray: #ababab;
 $blue: #2e3edf;
+$red: #ff0000;