docs(demo): add bootstrap demo component

.eslintrc.json

@@ -21,6 +21,7 @@
     "@typescript-eslint/strict-boolean-expressions": "off",
     "@typescript-eslint/member-delimiter-style": "off",
     "@typescript-eslint/object-curly-spacing": "off",
+    "@typescript-eslint/indent": "off",
     "no-prototype-builtins": "off",
     "padded-blocks": "off"
   }

package.json

@@ -30,6 +30,7 @@
     "@angular/platform-browser": "^15.2.0",
     "@angular/platform-browser-dynamic": "^15.2.0",
     "@angular/router": "^15.2.0",
+    "bootstrap": "^5.2.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"

projects/ngx-validator-demo/src/app/app-routing.module.ts

@@ -1,7 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { BootstrapComponent } from './bootstrap/bootstrap.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: '',
+    component: BootstrapComponent
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

projects/ngx-validator-demo/src/app/app.component.html

@@ -1,76 +1 @@
-<div class="container py-5">
-  <div class="row">
-    <div class="col-sm-12 col-md-10 col-lg-8 col-xl-6">
-      <section>
-        <h3>
-          Simple login form
-        </h3>
-
-        <div class="card login-card">
-          <div class="card-body">
-            <form (ngSubmit)="onSubmit()" [formGroup]="loginForm">
-              <div class="mb-3">
-                <label for="email" class="form-label">Email address</label>
-                <input type="email" class="form-control" id="email" formControlName="email">
-              </div>
-              <div class="mb-3">
-                <label for="password" class="form-label">Password</label>
-                <input type="password" class="form-control" id="password" formControlName="password">
-              </div>
-              <div class="d-grid">
-                <button class="btn btn-primary" type="submit">Login</button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </section>
-
-      <section class="mt-5">
-        <h3>
-          Register form with nested form group
-        </h3>
-
-        <div class="card login-card">
-          <div class="card-body">
-            <form (ngSubmit)="onSubmit()" [formGroup]="registerForm">
-              <div class="mb-3">
-                <label for="first-name" class="form-label">First name</label>
-                <input type="text" class="form-control" id="first-name" formControlName="firstName">
-              </div>
-              <div class="mb-3">
-                <label for="last-name" class="form-label">Last name</label>
-                <input type="text" class="form-control" id="last-name" formControlName="lastName">
-              </div>
-              <div class="mb-3">
-                <label for="email" class="form-label">Email address</label>
-                <input type="email" class="form-control" id="email" formControlName="email">
-              </div>
-              <div formGroupName="address">
-                <div class="mb-3">
-                  <label for="street" class="form-label">Street</label>
-                  <input type="text" class="form-control" id="street" formControlName="street">
-                </div>
-                <div class="mb-3">
-                  <label for="city" class="form-label">City</label>
-                  <input type="text" class="form-control" id="city" formControlName="city">
-                </div>
-              </div>
-              <div class="mb-3">
-                <label for="password" class="form-label">Password</label>
-                <input type="password" class="form-control" id="password" formControlName="password">
-              </div>
-              <div class="mb-3">
-                <label for="confirm-password" class="form-label">Confirm password</label>
-                <input type="password" class="form-control" id="confirm-password" formControlName="confirmPassword">
-              </div>
-
-              <div class="d-grid">
-                <button class="btn btn-primary" type="submit">Register</button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </section>
-    </div>
-  </div>
-</div>
+<router-outlet></router-outlet>

projects/ngx-validator-demo/src/app/app.component.scss

@@ -1,23 +0,0 @@
-.card {
-  width: 520px;
-}
-
-.card-body {
-  padding: 24px;
-}
-
-.mb-3 {
-  margin-bottom: 16px;
-}
-
-input {
-  display: block;
-  width: 100%;
-  padding: 6px;
-}
-
-button{
-  cursor: pointer;
-  height: 32px;
-  padding: 0 12px;
-}

projects/ngx-validator-demo/src/app/app.component.ts

@@ -1,63 +1,9 @@
 import { Component } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-
-const matchPassword = (password: string, confirmPassword: string) => {
-  return (formGroup: FormGroup) => {
-    const passwordControl = formGroup.controls[password];
-    const confirmPasswordControl = formGroup.controls[confirmPassword];
-
-    if (!passwordControl || !confirmPasswordControl) {
-      return;
-    }
-
-    if (
-      confirmPasswordControl.errors &&
-      !confirmPasswordControl.errors['passwordMismatch']
-    ) {
-      return;
-    }
-
-    if (passwordControl.value !== confirmPasswordControl.value) {
-      confirmPasswordControl.setErrors({
-        passwordMismatch: { message: 'not match' },
-      });
-    } else {
-      confirmPasswordControl.setErrors(null);
-    }
-  };
-};
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  loginForm = this.formBuilder.group({
-    email: ['', [Validators.required, Validators.email]],
-    password: ['', [Validators.required, Validators.minLength(6)]],
-  });
-
-  registerForm = this.formBuilder.group(
-    {
-      firstName: ['', [Validators.required]],
-      lastName: ['', [Validators.required]],
-      email: ['', [Validators.required, Validators.email]],
-      address: this.formBuilder.group({
-        street: ['', [Validators.required]],
-        city: ['', [Validators.required]],
-      }),
-      password: ['', [Validators.required, Validators.minLength(6)]],
-      confirmPassword: ['', [Validators.required]],
-    },
-    {
-      validators: [matchPassword],
-    }
-  );
-
-  constructor(private formBuilder: FormBuilder) {}
-
-  onSubmit(): void {
-    console.log(this.loginForm);
-  }
 }

projects/ngx-validator-demo/src/app/app.module.ts

@@ -1,20 +1,20 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { FormValidatorModule, FormValidatorConfig } from 'projects/ngx-validator/src/public-api';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { FormValidatorModule, FormValidatorConfig } from 'projects/ngx-validator/src/public-api';
-import { ReactiveFormsModule } from '@angular/forms';
+import { BootstrapComponent } from './bootstrap/bootstrap.component';
 
 const formValidatorConfig: FormValidatorConfig = {
-  validateOn: ({ dirty, touched, submited }) => {
-    return (dirty && touched) || submited;
-  }
 }
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    BootstrapComponent
   ],
   imports: [
     BrowserModule,