mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-11-04 09:33:33 +00:00
forms page done...
This commit is contained in:
Sercan Yemen
parent
3b0e92c102
commit
45da6e81ed
@ -252,6 +252,12 @@ export class FuseNavigation
|
||||
}
|
||||
]
|
||||
},*/
|
||||
{
|
||||
'title': 'Forms',
|
||||
'type' : 'nav-item',
|
||||
'icon' : 'web_asset',
|
||||
'url' : '/ui/forms'
|
||||
},
|
||||
{
|
||||
'title': 'Icons',
|
||||
'type' : 'nav-item',
|
||||
|
||||
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 { UIFormsModule } from './forms/forms.module';
|
||||
import { UIIconsModule } from './icons/icons.module';
|
||||
import { UITypographyModule } from './typography/typography.module';
|
||||
import { UIHelperClassesModule } from './helper-classes/helper-classes.module';
|
||||
@ -8,6 +9,7 @@ import { UIColorsModule } from './colors/colors.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
UIFormsModule,
|
||||
UIIconsModule,
|
||||
UITypographyModule,
|
||||
UIHelperClassesModule,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user