mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 12:35:07 +00:00
Merge remote-tracking branch 'origin/master'
This commit is contained in:
mustafahlvc
commit
d86f7b892e
|
|
@ -252,6 +252,12 @@ export class FuseNavigation
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},*/
|
},*/
|
||||||
|
{
|
||||||
|
'title': 'Forms',
|
||||||
|
'type' : 'nav-item',
|
||||||
|
'icon' : 'web_asset',
|
||||||
|
'url' : '/ui/forms'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
'title': 'Icons',
|
'title': 'Icons',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
|
|
@ -386,6 +392,12 @@ export class FuseNavigation
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
'title': 'Price Tables',
|
||||||
|
'type' : 'nav-item',
|
||||||
|
'icon' : 'view_carousel',
|
||||||
|
'url' : '/components/price-tables'
|
||||||
|
}
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,11 +2,16 @@ import { NgModule } from '@angular/core';
|
||||||
import { SharedModule } from '../../../core/modules/shared.module';
|
import { SharedModule } from '../../../core/modules/shared.module';
|
||||||
import { RouterModule } from '@angular/router';
|
import { RouterModule } from '@angular/router';
|
||||||
import { NgxDatatableComponent } from './datatable/ngx-datatable.component';
|
import { NgxDatatableComponent } from './datatable/ngx-datatable.component';
|
||||||
|
import { FusePriceTablesComponent } from './price-tables/price-tables.component';
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
path : 'components/datatables/ngx-datatable',
|
path : 'components/datatables/ngx-datatable',
|
||||||
component: NgxDatatableComponent
|
component: NgxDatatableComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path : 'components/price-tables',
|
||||||
|
component: FusePriceTablesComponent
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
@ -16,7 +21,8 @@ const routes = [
|
||||||
RouterModule.forChild(routes)
|
RouterModule.forChild(routes)
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
NgxDatatableComponent
|
NgxDatatableComponent,
|
||||||
|
FusePriceTablesComponent
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class ComponentsModule
|
export class ComponentsModule
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,320 @@
|
||||||
|
<div id="price-tables" class="page-layout simple fullwidth">
|
||||||
|
|
||||||
|
<!-- HEADER -->
|
||||||
|
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<div fxLayout="column" fxLayoutAlign="center start">
|
||||||
|
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<md-icon class="secondary-text s-16">home</md-icon>
|
||||||
|
<md-icon class="secondary-text s-16">chevron_right</md-icon>
|
||||||
|
<span class="secondary-text">Tables</span>
|
||||||
|
</div>
|
||||||
|
<div class="h2 mt-16">Price Tables</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- / HEADER -->
|
||||||
|
|
||||||
|
<!-- CONTENT -->
|
||||||
|
<div class="content p-24" fxLayout="column">
|
||||||
|
|
||||||
|
<!-- STYLE 1 -->
|
||||||
|
<div fxLayout="column">
|
||||||
|
|
||||||
|
<div class="mat-title">Style 1</div>
|
||||||
|
|
||||||
|
<div class="price-tables" fxLayout="row" fxLayoutWrap>
|
||||||
|
<div class="price-table style-1 mat-elevation-z1" fxLayout="column">
|
||||||
|
<div class="package-type md-primary-bg">
|
||||||
|
<span>BASIC</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price" fxLayout="row" fxLayoutAlign="center start">
|
||||||
|
<div class="currency">$</div>
|
||||||
|
<div fxLayout="row" fxLayoutAlign="center end">
|
||||||
|
<div class="value">4</div>
|
||||||
|
<div class="period">/ month</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<md-divider></md-divider>
|
||||||
|
|
||||||
|
<div class="terms" fxLayout="column">
|
||||||
|
<div class="term">
|
||||||
|
<span class="text-bold">10</span>
|
||||||
|
Projects
|
||||||
|
</div>
|
||||||
|
<div class="term">
|
||||||
|
<span class="text-bold">10</span>
|
||||||
|
Pages
|
||||||
|
</div>
|
||||||
|
<div class="term">
|
||||||
|
<span class="text-bold">100</span>
|
||||||
|
Mb Disk Space
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button md-raised-button class="cta-button" color="accent">BUY NOW</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price-table style-1 mat-elevation-z8" fxLayout="column">
|
||||||
|
<div class="package-type md-primary-bg" fxLayout="row" fxLayoutAlign="space-between center">
|
||||||
|
<span>STANDARD</span>
|
||||||
|
<span class="sale md-accent-color md-hue-1">Save 15%</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price" fxLayout="row" fxLayoutAlign="center start">
|
||||||
|
<div class="currency">$</div>
|
||||||
|
<div fxLayout="row" fxLayoutAlign="center end">
|
||||||
|
<div class="value">8</div>
|
||||||
|
<div class="period">/ month</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<md-divider></md-divider>
|
||||||
|
|
||||||
|
<div class="terms" fxLayout="column">
|
||||||
|
<div class="term">
|
||||||
|
<span class="text-bold">20</span>
|
||||||
|
Projects
|
||||||
|
</div>
|
||||||
|
<div class="term">
|
||||||
|
<span class="text-bold">20</span>
|
||||||
|
Pages
|
||||||
|
</div>
|
||||||
|
<div class="term">
|
||||||
|
<span class="text-bold">200</span>
|
||||||
|
Mb Disk Space
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button md-raised-button class="cta-button" color="accent">BUY NOW</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price-table style-1 mat-elevation-z1" fxLayout="column">
|
||||||
|
<div class="package-type md-primary-bg" fxLayout="row">
|
||||||
|
<span>ADVANCED</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price" fxLayout="row" fxLayoutAlign="center start">
|
||||||
|
<div class="currency">$</div>
|
||||||
|
<div fxLayout="row" fxLayoutAlign="center end">
|
||||||
|
<div class="value">12</div>
|
||||||
|
<div class="period">/ month</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<md-divider></md-divider>
|
||||||
|
|
||||||
|
<div class="terms" fxLayout="column">
|
||||||
|
<div class="term">
|
||||||
|
<span class="text-bold">40</span>
|
||||||
|
Projects
|
||||||
|
</div>
|
||||||
|
<div class="term">
|
||||||
|
<span class="text-bold">40</span>
|
||||||
|
Pages
|
||||||
|
</div>
|
||||||
|
<div class="term">
|
||||||
|
<span class="text-bold">500</span>
|
||||||
|
Mb Disk Space
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button md-raised-button class="cta-button" color="accent">BUY NOW</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- / STYLE 1 -->
|
||||||
|
|
||||||
|
<!-- STYLE 2 -->
|
||||||
|
<div fxLayout="column" class="mt-48">
|
||||||
|
|
||||||
|
<div class="mat-title">Style 2</div>
|
||||||
|
|
||||||
|
<div class="price-tables" fxLayout="row" fxLayoutWrap>
|
||||||
|
<div class="price-table style-2 mat-elevation-z1" fxLayout="column">
|
||||||
|
<div class="package-type md-accent-fg">SILVER PACKAGE</div>
|
||||||
|
|
||||||
|
<div class="price" fxLayout="row" fxLayoutAlign="center start">
|
||||||
|
<div class="currency">$</div>
|
||||||
|
<div class="value">99</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="period">PER MONTH</div>
|
||||||
|
|
||||||
|
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
|
||||||
|
<div class="term">
|
||||||
|
<span class="text-bold">10</span>
|
||||||
|
Projects
|
||||||
|
</div>
|
||||||
|
<div class="term">
|
||||||
|
<span class="text-bold">10</span>
|
||||||
|
Pages
|
||||||
|
</div>
|
||||||
|
<div class="term">
|
||||||
|
<span class="text-bold">100</span>
|
||||||
|
Mb Disk Space
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button md-raised-button class="cta-button" color="accent">GET STARTED</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price-table style-2 mat-elevation-z8" fxLayout="column">
|
||||||
|
<div class="badge md-warn-bg">BEST VALUE</div>
|
||||||
|
|
||||||
|
<div class="package-type md-accent-fg">GOLD PACKAGE</div>
|
||||||
|
|
||||||
|
<div class="price" fxLayout="row" fxLayoutAlign="center start">
|
||||||
|
<div class="currency">$</div>
|
||||||
|
<div class="value">299</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="period">PER MONTH</div>
|
||||||
|
|
||||||
|
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
|
||||||
|
<div class="term">
|
||||||
|
<span class="text-bold">20</span>
|
||||||
|
Projects
|
||||||
|
</div>
|
||||||
|
<div class="term">
|
||||||
|
<span class="text-bold">20</span>
|
||||||
|
Pages
|
||||||
|
</div>
|
||||||
|
<div class="term">
|
||||||
|
<span class="text-bold">200</span>
|
||||||
|
Mb Disk Space
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button md-raised-button class="cta-button" color="accent">GET STARTED</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price-table style-2 mat-elevation-z1" fxLayout="column">
|
||||||
|
<div class="package-type md-accent-fg">PLATINUM PACKAGE</div>
|
||||||
|
|
||||||
|
<div class="price" fxLayout="row" fxLayoutAlign="center start">
|
||||||
|
<div class="currency">$</div>
|
||||||
|
<div class="value">499</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="period">PER MONTH</div>
|
||||||
|
|
||||||
|
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
|
||||||
|
<div class="term">
|
||||||
|
<span class="text-bold">40</span>
|
||||||
|
Projects
|
||||||
|
</div>
|
||||||
|
<div class="term">
|
||||||
|
<span class="text-bold">40</span>
|
||||||
|
Pages
|
||||||
|
</div>
|
||||||
|
<div class="term">
|
||||||
|
<span class="text-bold">500</span>
|
||||||
|
Mb Disk Space
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button md-raised-button class="cta-button" color="accent">GET STARTED</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- / STYLE 2 -->
|
||||||
|
|
||||||
|
<!-- STYLE 3 -->
|
||||||
|
<div fxLayout="column" class="mt-48">
|
||||||
|
|
||||||
|
<div class="mat-title">Style 3</div>
|
||||||
|
|
||||||
|
<div class="price-tables" fxLayout="row" fxLayoutAlign="start start" fxLayoutWrap>
|
||||||
|
<div class="price-table style-3 mat-elevation-z1" fxLayout="column">
|
||||||
|
<div class="package-type">
|
||||||
|
<div class="title">Starter</div>
|
||||||
|
<div class="subtitle">For small teams</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price md-primary-bg md-hue-3" fxLayout="row" fxLayoutAlign="center start">
|
||||||
|
<div class="currency">$</div>
|
||||||
|
<div fxLayout="row" fxLayoutAlign="center end">
|
||||||
|
<div class="value">29</div>
|
||||||
|
<div class="period">monthly per user</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
|
||||||
|
<div class="term">Unlimited projects</div>
|
||||||
|
<div class="term">Unlimited pages</div>
|
||||||
|
<div class="term">Unlimited disk space</div>
|
||||||
|
<div class="term">24 / 7 Free support</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button md-raised-button class="cta-button" color="accent">GET STARTED FREE</button>
|
||||||
|
|
||||||
|
<div class="note">7 day free trial to start</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price-table style-3 mat-elevation-z8" fxLayout="column">
|
||||||
|
<div class="package-type">
|
||||||
|
<div class="title">Pro</div>
|
||||||
|
<div class="subtitle">For larger teams</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price md-primary-bg" fxLayout="row" fxLayoutAlign="center start">
|
||||||
|
<div class="currency">$</div>
|
||||||
|
<div fxLayout="row" fxLayoutAlign="center end">
|
||||||
|
<div class="value">59</div>
|
||||||
|
<div class="period">monthly per user</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
|
||||||
|
<div class="term">Unlimited projects</div>
|
||||||
|
<div class="term">Unlimited pages</div>
|
||||||
|
<div class="term">Unlimited disk space</div>
|
||||||
|
<div class="term">24 / 7 Free support</div>
|
||||||
|
<div class="term md-warn-fg">Advanced reporting</div>
|
||||||
|
<div class="term md-warn-fg">Customizable interface</div>
|
||||||
|
<div class="term md-warn-fg">CRM Integration</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button md-raised-button class="cta-button" color="accent">GET STARTED FREE</button>
|
||||||
|
|
||||||
|
<div class="note">30 day free trial to start</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price-table style-3 mat-elevation-z1" fxLayout="column">
|
||||||
|
<div class="package-type">
|
||||||
|
<div class="title">Enterprise</div>
|
||||||
|
<div class="subtitle">For big teams</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price md-primary-bg md-hue-3" fxLayout="row" fxLayoutAlign="center start">
|
||||||
|
<div class="currency">$</div>
|
||||||
|
<div fxLayout="row" fxLayoutAlign="center end">
|
||||||
|
<div class="value">99</div>
|
||||||
|
<div class="period">monthly per user</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
|
||||||
|
<div class="term">Unlimited projects</div>
|
||||||
|
<div class="term">Unlimited pages</div>
|
||||||
|
<div class="term">Unlimited disk space</div>
|
||||||
|
<div class="term">For full feature list, call us</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button md-raised-button class="cta-button" color="accent">CALL US</button>
|
||||||
|
|
||||||
|
<div class="note">90 day free trial to start</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- / STYLE 3 -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
:host {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector : 'fuse-price-tables',
|
||||||
|
templateUrl: './price-tables.component.html',
|
||||||
|
styleUrls : ['./price-tables.component.scss']
|
||||||
|
})
|
||||||
|
export class FusePriceTablesComponent
|
||||||
|
{
|
||||||
|
constructor()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
124
src/app/main/content/ui/forms/forms.component.html
Normal file
124
src/app/main/content/ui/forms/forms.component.html
Normal file
|
|
@ -0,0 +1,124 @@
|
||||||
|
<div id="forms" class="page-layout simple fullwidth" fxLayout="column">
|
||||||
|
|
||||||
|
<!-- HEADER -->
|
||||||
|
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<div fxLayout="column" fxLayoutAlign="center start">
|
||||||
|
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<md-icon class="secondary-text s-16">home</md-icon>
|
||||||
|
<md-icon class="secondary-text s-16">chevron_right</md-icon>
|
||||||
|
<span class="secondary-text">User Interface</span>
|
||||||
|
</div>
|
||||||
|
<div class="h1 mt-16">Forms</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- / HEADER -->
|
||||||
|
|
||||||
|
<!-- CONTENT -->
|
||||||
|
<div class="content p-24">
|
||||||
|
|
||||||
|
<p class="mb-32">
|
||||||
|
Angular reactive forms facilitate a reactive style of programming that favors explicit management of the
|
||||||
|
data flowing between a non-UI data model (typically retrieved from a server) and a UI-oriented form model
|
||||||
|
that retains the states and values of the HTML controls on screen. Reactive forms offer the ease of using
|
||||||
|
reactive patterns, testing, and validation.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div fxLayout="column" fxLayoutAlign="start start" fxLayout.gt-sm="row">
|
||||||
|
|
||||||
|
<form class="md-white-bg mat-elevation-z4 p-24 mr-24 mb-24" fxLayout="column" fxLayoutAlign="start"
|
||||||
|
fxFlex="1"
|
||||||
|
name="form" [formGroup]="form">
|
||||||
|
|
||||||
|
<div class="h2 mb-24">Reactive Form Example</div>
|
||||||
|
|
||||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
|
||||||
|
|
||||||
|
<md-input-container fxFlex="100">
|
||||||
|
<input mdInput placeholder="Company (disabled)" formControlName="company">
|
||||||
|
</md-input-container>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
|
||||||
|
|
||||||
|
<md-input-container fxFlex="50">
|
||||||
|
<input mdInput placeholder="First name" formControlName="firstName">
|
||||||
|
<md-error *ngIf="formErrors.firstName.required">
|
||||||
|
Required
|
||||||
|
</md-error>
|
||||||
|
</md-input-container>
|
||||||
|
|
||||||
|
<md-input-container fxFlex="50">
|
||||||
|
<input mdInput placeholder="Last name" formControlName="lastName">
|
||||||
|
<md-error *ngIf="formErrors.lastName.required">
|
||||||
|
Required
|
||||||
|
</md-error>
|
||||||
|
</md-input-container>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="100" fxLayoutWrap>
|
||||||
|
|
||||||
|
<md-input-container fxFlex="100">
|
||||||
|
<textarea mdInput placeholder="Address" formControlName="address">
|
||||||
|
1600 Amphitheatre Pkwy
|
||||||
|
</textarea>
|
||||||
|
<md-error *ngIf="formErrors.address.required">
|
||||||
|
Required
|
||||||
|
</md-error>
|
||||||
|
</md-input-container>
|
||||||
|
|
||||||
|
<md-input-container fxFlex="100">
|
||||||
|
<textarea mdInput placeholder="Address 2" formControlName="address2"></textarea>
|
||||||
|
<md-error *ngIf="formErrors.address2.required">
|
||||||
|
Required
|
||||||
|
</md-error>
|
||||||
|
</md-input-container>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
|
||||||
|
|
||||||
|
<md-input-container fxFlex="33">
|
||||||
|
<input mdInput placeholder="City" formControlName="city">
|
||||||
|
<md-error *ngIf="formErrors.city.required">
|
||||||
|
Required
|
||||||
|
</md-error>
|
||||||
|
</md-input-container>
|
||||||
|
|
||||||
|
<md-input-container fxFlex="34">
|
||||||
|
<input mdInput placeholder="State" formControlName="state">
|
||||||
|
<md-error *ngIf="formErrors.state.required">
|
||||||
|
Required
|
||||||
|
</md-error>
|
||||||
|
</md-input-container>
|
||||||
|
|
||||||
|
<md-input-container fxFlex="33">
|
||||||
|
<input mdInput #postalCode placeholder="Postal Code" value="94043"
|
||||||
|
formControlName="postalCode">
|
||||||
|
<md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
|
||||||
|
<md-error *ngIf="formErrors.postalCode.maxlength">
|
||||||
|
Postal Code needs to be max. {{formErrors.postalCode.maxlength.requiredLength}} characters
|
||||||
|
</md-error>
|
||||||
|
</md-input-container>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="form-errors-model md-white-bg p-24 mat-elevation-z4">
|
||||||
|
|
||||||
|
<div class="h2 mb-24">Reactive Form Errors Model</div>
|
||||||
|
|
||||||
|
<pre><code>{{formErrors | json}}</code></pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- / CONTENT -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
17
src/app/main/content/ui/forms/forms.component.scss
Normal file
17
src/app/main/content/ui/forms/forms.component.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
:host {
|
||||||
|
|
||||||
|
.content {
|
||||||
|
|
||||||
|
form {
|
||||||
|
max-width: 800px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-errors-model {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
code {
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
67
src/app/main/content/ui/forms/forms.component.ts
Normal file
67
src/app/main/content/ui/forms/forms.component.ts
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector : 'fuse-forms',
|
||||||
|
templateUrl: './forms.component.html',
|
||||||
|
styleUrls : ['./forms.component.scss']
|
||||||
|
})
|
||||||
|
export class FuseFormsComponent implements OnInit
|
||||||
|
{
|
||||||
|
form: FormGroup;
|
||||||
|
formErrors: any;
|
||||||
|
|
||||||
|
constructor(private formBuilder: FormBuilder)
|
||||||
|
{
|
||||||
|
this.formErrors = {
|
||||||
|
company : {},
|
||||||
|
firstName : {},
|
||||||
|
lastName : {},
|
||||||
|
address : {},
|
||||||
|
address2 : {},
|
||||||
|
city : {},
|
||||||
|
state : {},
|
||||||
|
postalCode: {}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit()
|
||||||
|
{
|
||||||
|
this.form = this.formBuilder.group({
|
||||||
|
company : [{value: 'Google', disabled: true}, Validators.required],
|
||||||
|
firstName : ['', Validators.required],
|
||||||
|
lastName : ['', Validators.required],
|
||||||
|
address : ['', Validators.required],
|
||||||
|
address2 : ['', Validators.required],
|
||||||
|
city : ['', Validators.required],
|
||||||
|
state : ['', Validators.required],
|
||||||
|
postalCode: ['', [Validators.required, Validators.maxLength(5)]]
|
||||||
|
});
|
||||||
|
|
||||||
|
this.form.valueChanges.subscribe(() => {
|
||||||
|
this.onFormValuesChanged();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onFormValuesChanged()
|
||||||
|
{
|
||||||
|
for ( const field in this.formErrors )
|
||||||
|
{
|
||||||
|
if ( !this.formErrors.hasOwnProperty(field) )
|
||||||
|
{
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clear previous errors
|
||||||
|
this.formErrors[field] = {};
|
||||||
|
|
||||||
|
// Get the control
|
||||||
|
const control = this.form.get(field);
|
||||||
|
|
||||||
|
if ( control && control.dirty && !control.valid )
|
||||||
|
{
|
||||||
|
this.formErrors[field] = control.errors;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
25
src/app/main/content/ui/forms/forms.module.ts
Normal file
25
src/app/main/content/ui/forms/forms.module.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { SharedModule } from '../../../../core/modules/shared.module';
|
||||||
|
import { RouterModule, Routes } from '@angular/router';
|
||||||
|
|
||||||
|
import { FuseFormsComponent } from './forms.component';
|
||||||
|
|
||||||
|
const routes: Routes = [
|
||||||
|
{
|
||||||
|
path : 'ui/forms',
|
||||||
|
component: FuseFormsComponent
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports : [
|
||||||
|
SharedModule,
|
||||||
|
RouterModule.forChild(routes)
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
FuseFormsComponent
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class UIFormsModule
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
|
|
||||||
|
import { UIFormsModule } from './forms/forms.module';
|
||||||
import { UIIconsModule } from './icons/icons.module';
|
import { UIIconsModule } from './icons/icons.module';
|
||||||
import { UITypographyModule } from './typography/typography.module';
|
import { UITypographyModule } from './typography/typography.module';
|
||||||
import { UIHelperClassesModule } from './helper-classes/helper-classes.module';
|
import { UIHelperClassesModule } from './helper-classes/helper-classes.module';
|
||||||
|
|
@ -8,6 +9,7 @@ import { UIColorsModule } from './colors/colors.module';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
UIFormsModule,
|
||||||
UIIconsModule,
|
UIIconsModule,
|
||||||
UITypographyModule,
|
UITypographyModule,
|
||||||
UIHelperClassesModule,
|
UIHelperClassesModule,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user