feat: add validate for angular material UI

truonghungit · May 18, 2023 · b5347ee · b5347ee
1 parent 02610e7
commit b5347ee
Show file tree

Hide file tree

Showing 19 changed files with 1,081 additions and 182 deletions.
diff --git a/README.md b/README.md
@@ -197,6 +197,65 @@ export class AppModule { }
 
 ```
 
+## Reference
+
+### Directives
+
+#### FormGroupValidatorDirective
+
+Selector: `[formGroup],[formGroupName]`
+
+Exported as: `formGroupValidator`
+
+##### Properties
+
+#### FormControlValidatorDirective
+
+Selector: `[formControl],[formControlName]`
+
+Exported as: `formControlValidator`
+##### Properties
+
+### Validators
+
+We wrap the build-in angular validator to allow passing the error message to the validator function.
+
+#### min()
+Validator that requires the control's value to be greater than or equal to the provided number.
+
+`min(min: number, message: string): ValidatorFn`
+
+##### Parameters
+| Name                          | Type    |
+| ------------------------------| ------- |
+| min                           | number  |
+| message                       | string  |
+
+##### Examples:
+```typescript
+const control = new FormControl(2, min(10, 'Value should be greater than or equal to 10'));
+
+console.log(control.errors); // {min: {min: 10, actual: 2, message: 'Value should be greater than or equal to 10'}}
+```
+
+#### max()
+Validator that requires the control's value to be less than or equal to the provided number.
+
+`max(max: number, message: string): ValidatorFn`
+
+##### Parameters
+| Name                          | Type    |
+| ------------------------------| ------- |
+| max                           | number  |
+| message                       | string  |
+
+##### Examples:
+```typescript
+const control = new FormControl(2, max(10, 'Value should be less than or equal to 10'));
+
+console.log(control.errors); // {min: {max: 10, actual: 2, message: 'Value should be less than or equal to 10'}}
+```
+
 ### Configuration Options
 #### skipValidate
 Default is `false`.
@@ -214,3 +273,4 @@ const formValidatorConfig: FormValidatorConfig = {
   }
 }
 ```
+
diff --git a/angular.json b/angular.json
@@ -63,7 +63,8 @@
               "projects/ngx-validator-demo/src/assets"
             ],
             "styles": [
-              "projects/ngx-validator-demo/src/styles.scss"
+              "projects/ngx-validator-demo/src/styles.scss",
+              "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
             ],
             "scripts": []
           },
@@ -132,169 +133,6 @@
           }
         }
       }
-    },
-    "ngx-webstorage": {
-      "projectType": "library",
-      "root": "projects/ngx-webstorage",
-      "sourceRoot": "projects/ngx-webstorage/src",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "project": "projects/ngx-webstorage/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "projects/ngx-webstorage/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "projects/ngx-webstorage/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "tsConfig": "projects/ngx-webstorage/tsconfig.spec.json",
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ]
-          }
-        }
-      }
-    },
-    "ngx-show-hide-password": {
-      "projectType": "library",
-      "root": "projects/ngx-show-hide-password",
-      "sourceRoot": "projects/ngx-show-hide-password/src",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "project": "projects/ngx-show-hide-password/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "projects/ngx-show-hide-password/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "projects/ngx-show-hide-password/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "tsConfig": "projects/ngx-show-hide-password/tsconfig.spec.json",
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ]
-          }
-        }
-      }
-    },
-    "ngx-show-hide-password-demo": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        }
-      },
-      "root": "projects/ngx-show-hide-password-demo",
-      "sourceRoot": "projects/ngx-show-hide-password-demo/src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/ngx-show-hide-password-demo",
-            "index": "projects/ngx-show-hide-password-demo/src/index.html",
-            "main": "projects/ngx-show-hide-password-demo/src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
-            "tsConfig": "projects/ngx-show-hide-password-demo/tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              "projects/ngx-show-hide-password-demo/src/favicon.ico",
-              "projects/ngx-show-hide-password-demo/src/assets"
-            ],
-            "styles": [
-              "projects/ngx-show-hide-password-demo/src/styles.scss"
-            ],
-            "scripts": []
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "buildOptimizer": false,
-              "optimization": false,
-              "vendorChunk": true,
-              "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "configurations": {
-            "production": {
-              "browserTarget": "ngx-show-hide-password-demo:build:production"
-            },
-            "development": {
-              "browserTarget": "ngx-show-hide-password-demo:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "ngx-show-hide-password-demo:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
-            "tsConfig": "projects/ngx-show-hide-password-demo/tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              "projects/ngx-show-hide-password-demo/src/favicon.ico",
-              "projects/ngx-show-hide-password-demo/src/assets"
-            ],
-            "styles": [
-              "projects/ngx-show-hide-password-demo/src/styles.scss"
-            ],
-            "scripts": []
-          }
-        }
-      }
     }
   },
   "cli": {

diff --git a/package.json b/package.json
@@ -23,10 +23,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^15.2.0",
+    "@angular/cdk": "15.2.9",
     "@angular/common": "^15.2.0",
     "@angular/compiler": "^15.2.0",
     "@angular/core": "^15.2.0",
     "@angular/forms": "^15.2.0",
+    "@angular/material": "15.2.9",
     "@angular/platform-browser": "^15.2.0",
     "@angular/platform-browser-dynamic": "^15.2.0",
     "@angular/router": "^15.2.0",
@@ -88,4 +90,4 @@
   "lint-staged": {
     "*.{ts,js,html,css,scss,less,md,json}": "prettier --write"
   }
-}
+}
diff --git a/projects/ngx-validator-demo/src/app/angular-material/angular-material.component.html b/projects/ngx-validator-demo/src/app/angular-material/angular-material.component.html
@@ -0,0 +1,38 @@
+<div class="container">
+  <div class="row">
+    <div class="col-sm-12 col-md-10 col-lg-8 col-xl-6">
+      <section class="mt-5">
+        <h3>
+          <small class="text-body-secondary">Simple form: </small>
+          Add education
+        </h3>
+
+        <form (ngSubmit)="onSubmit()" [formGroup]="simpleForm">
+          <mat-card>
+            <mat-card-content>
+              <mat-form-field appearance="outline" class="mb-3">
+                <mat-label>School</mat-label>
+                <input matInput placeholder="Ex: Northwestern University" formControlName="school">
+              </mat-form-field>
+
+              <mat-form-field appearance="outline" class="mb-3">
+                <mat-label>Area of Study</mat-label>
+                <input matInput placeholder="Ex: Northwestern University" formControlName="school">
+              </mat-form-field>
+
+              <mat-form-field appearance="outline" class="mb-3">
+                <mat-label>Description</mat-label>
+                <input matInput placeholder="Ex: Northwestern University" formControlName="school">
+              </mat-form-field>
+            </mat-card-content>
+
+            <mat-card-actions>
+              <button mat-raised-button color="primary">LIKE</button>
+            </mat-card-actions>
+
+          </mat-card>
+        </form>
+      </section>
+    </div>
+  </div>
+</div>
diff --git a/projects/ngx-validator-demo/src/app/angular-material/angular-material.component.scss b/projects/ngx-validator-demo/src/app/angular-material/angular-material.component.scss
@@ -0,0 +1,13 @@
+.mat-mdc-form-field {
+  width: 100%;
+}
+
+.mat-mdc-card-content {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.mat-mdc-card-actions {
+  padding-left: 24px;
+  padding-right: 24px;
+}
diff --git a/projects/ngx-validator-demo/src/app/angular-material/angular-material.component.ts b/projects/ngx-validator-demo/src/app/angular-material/angular-material.component.ts
@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-angular-material',
+  templateUrl: './angular-material.component.html',
+  styleUrls: ['./angular-material.component.scss']
+})
+export class AngularMaterialComponent {
+  simpleForm = this.formBuilder.group({
+    school: ['', [Validators.required]],
+    degree: ['', [Validators.required]],
+    areaOfStudy: ['', [Validators.required]],
+    description: ['', [Validators.required]],
+  });
+
+  constructor(private formBuilder: FormBuilder) { }
+
+  onSubmit(): void {
+  }
+}
diff --git a/projects/ngx-validator-demo/src/app/app-routing.module.ts b/projects/ngx-validator-demo/src/app/app-routing.module.ts
@@ -1,11 +1,16 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { BootstrapComponent } from './bootstrap/bootstrap.component';
+import { AngularMaterialComponent } from './angular-material/angular-material.component';
 
 const routes: Routes = [
   {
     path: '',
     component: BootstrapComponent
+  },
+  {
+    path: 'material',
+    component: AngularMaterialComponent
   }
 ];