docs: add material example

Author: rams23

angular.json

@@ -27,6 +27,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": [],
@@ -84,6 +85,7 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": [],

package-lock.json

@@ -1,6 +1,7 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {MainFromComponent} from './main-from/main-from.component';
+import {MaterialFromComponent} from './material-from/material-from.component';
 
 const routes: Routes = [
   {
@@ -11,6 +12,10 @@ const routes: Routes = [
     path: 'lazy',
     loadChildren: './lazy/lazy.module#LazyModule'
   },
+  {
+    path: 'material',
+    component: MaterialFromComponent
+  },
   {
     path: '',
     pathMatch: 'full',

src/app/app-routing.module.ts

@@ -13,6 +13,10 @@ import {MainFromComponent} from './main-from/main-from.component';
 import {SharedModule} from './shared/shared.module';
 import {SimpleErrorPipe} from './simple-error-pipe.pipe';
 import {SimpleMessagesProviderService} from './simple-messages-provider.service';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {MatInputModule} from '@angular/material/input';
+import {MatButtonModule} from '@angular/material/button';
+import {MaterialFromComponent} from './material-from/material-from.component';
 
 export function httpLoaderFactory(http: HttpClient): TranslateLoader {
   return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
@@ -33,7 +37,8 @@ export function simpleCustomPipeFactoryCreator(messageProvider: SimpleMessagesPr
     AppComponent,
     CustomErrorsComponent,
     MainFromComponent,
-    SimpleErrorPipe
+    SimpleErrorPipe,
+    MaterialFromComponent
   ],
   imports: [
     AppRoutingModule,
@@ -50,6 +55,9 @@ export function simpleCustomPipeFactoryCreator(messageProvider: SimpleMessagesPr
         deps: [HttpClient]
       }
     }),
+    MatInputModule,
+    MatButtonModule,
+    BrowserAnimationsModule,
   ],
   providers: [
 

src/app/app.module.ts

@@ -0,0 +1,10 @@
+
+.input-wrapper {
+  position: relative;
+  padding-bottom: 20px;
+}
+
+form {
+  width: 50%;
+  margin: auto;
+}

src/app/material-from/material-from.component.css

@@ -0,0 +1,44 @@
+<div style="width: 40%; text-align: center;margin: auto">
+  <img src="assets/images/logo-blu.svg"/>
+</div>
+<h2 style="text-align: center">xtream validation errors</h2>
+<form [formGroup]="heroForm" validationContext="NEW_HERO" innerValidationError="true" #firstForm>
+
+
+  <div style="display:flex;flex-direction: column;">
+    <mat-form-field *ngxValidationErrors="heroForm.get('name'); errors as errors">
+      <input matInput formControlName="name" placeholder="name"/>
+      <mat-error *ngIf="errors">{{errors}}</mat-error>
+    </mat-form-field>
+  </div>
+
+  <div style="display:flex;flex-direction: column;">
+    <mat-form-field *ngxValidationErrors="heroForm.get('surname'); errors as errors">
+      <input matInput formControlName="surname" placeholder="surname"/>
+      <mat-error *ngIf="errors">{{errors}}</mat-error>
+    </mat-form-field>
+  </div>
+
+  <button mat-raised-button color="primary"  [disabled]="heroForm.invalid">Submit</button>
+  <button mat-flat-button color="secondary" (click)="clearForm()">Clear</button>
+
+</form>
+
+<form [formGroup]="heroForm" validationContext="USER.REGISTRATION">
+  <div style="display:flex;flex-direction: column;">
+    <mat-form-field  *ngxValidationErrors="heroForm.get('name');errors as errors">
+      <input matInput formControlName="name" placeholder="name"/>
+      <mat-error *ngIf="errors">{{errors}}</mat-error>
+    </mat-form-field>
+  </div>
+
+  <div style="display:flex;flex-direction: column;">
+    <mat-form-field  *ngxValidationErrors="heroForm.get('surname');errors as errors">
+      <input matInput formControlName="surname" placeholder="surname"/>
+      <mat-error *ngIf="errors">{{errors}}</mat-error>
+    </mat-form-field>
+  </div>
+
+  <button mat-raised-button color="primary"  [disabled]="heroForm.invalid">Submit</button>
+
+</form>

src/app/material-from/material-from.component.html

@@ -0,0 +1,32 @@
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {TranslateService} from '@ngx-translate/core';
+import {ValidationContextComponent} from '@xtream/ngx-validation-errors';
+
+@Component({
+  selector: 'app-main-from',
+  templateUrl: './material-from.component.html',
+  styleUrls: ['./material-from.component.css']
+})
+export class MaterialFromComponent implements OnInit {
+
+  heroForm: FormGroup;
+  @ViewChild('firstForm', {read: ValidationContextComponent}) validationContext: ValidationContextComponent;
+
+  constructor(private translateService: TranslateService) {
+    this.heroForm = new FormGroup({
+      name: new FormControl(null, [Validators.required, Validators.minLength(4)]),
+      surname: new FormControl(null, [Validators.required, Validators.maxLength(1000)])
+    });
+  }
+
+  ngOnInit(): void {
+    this.translateService.setDefaultLang('en');
+    this.translateService.use('en');
+  }
+
+  clearForm() {
+    this.validationContext.clear();
+
+  }
+}

src/app/material-from/material-from.component.ts

@@ -8,6 +8,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

src/index.html

@@ -1,3 +1,4 @@
+import 'hammerjs';
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 

src/main.ts

@@ -1,3 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
 
 
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }