purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Forms) Simplified the form examples

Browse Source
This commit is contained in:
Sercan Yemen 2018-08-11 09:06:03 +03:00
parent a52b1f7687
commit 927b4fd322
2 changed files with 48 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
src/app/main/ui/forms/forms.component.html
View File

@ -1,7 +1,7 @@
<div id="forms" class="page-layout simple fullwidth" fxLayout="column"> <div id="forms" class="page-layout simple fullwidth" fxLayout="column">
<!-- HEADER --> <!-- HEADER -->
<div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center"> <div class="header accent p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="column" fxLayoutAlign="center start"> <div fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center"> <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon> <mat-icon class="secondary-text s-18">home</mat-icon>
@ -27,11 +27,11 @@
reactive patterns, testing, and validation. reactive patterns, testing, and validation.
</p> </p>
<div fxLayout="column" fxLayoutAlign="start start" fxLayout.gt-md="row"> <div class="mb-24" fxLayout="column" fxLayoutAlign="start" fxLayout.gt-md="row">
<!-- REACTIVE FORM EXAMPLE --> <!-- REACTIVE FORM EXAMPLE -->
<form class="mat-white-bg mat-elevation-z4 p-24 mr-24 mb-24" fxLayout="column" fxLayoutAlign="start" <form class="mat-elevation-z4 p-24 mr-24" fxLayout="column" fxLayoutAlign="start"
fxFlex="1 0 auto" name="form" [formGroup]="form"> fxFlex="1 0 auto" name="form" [formGroup]="form">
<div class="h2 mb-24">Reactive Form Example</div> <div class="h2 mb-24">Reactive Form Example</div>
@ -48,16 +48,12 @@
<mat-form-field fxFlex="50"> <mat-form-field fxFlex="50">
<input matInput placeholder="First name" formControlName="firstName" required> <input matInput placeholder="First name" formControlName="firstName" required>
<mat-error *ngIf="formErrors.firstName.required"> <mat-error>First Name is required!</mat-error>
First Name is required!
</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="50"> <mat-form-field fxFlex="50">
<input matInput placeholder="Last name" formControlName="lastName" required> <input matInput placeholder="Last name" formControlName="lastName" required>
<mat-error *ngIf="formErrors.lastName.required"> <mat-error>Last Name is required!</mat-error>
Last Name is required!
</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -68,16 +64,12 @@
<textarea matInput placeholder="Address" formControlName="address" required> <textarea matInput placeholder="Address" formControlName="address" required>
1600 Amphitheatre Pkwy 1600 Amphitheatre Pkwy
</textarea> </textarea>
<mat-error *ngIf="formErrors.address.required"> <mat-error>Address is required!</mat-error>
Address is required!
</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="100"> <mat-form-field fxFlex="100">
<textarea matInput placeholder="Address 2" formControlName="address2"></textarea> <textarea matInput placeholder="Address 2" formControlName="address2"></textarea>
<mat-error *ngIf="formErrors.address2.required"> <mat-error>Address 2 is required!</mat-error>
Address 2 is required!
</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -86,28 +78,19 @@
<mat-form-field fxFlex="33"> <mat-form-field fxFlex="33">
<input matInput placeholder="City" formControlName="city" required> <input matInput placeholder="City" formControlName="city" required>
<mat-error *ngIf="formErrors.city.required"> <mat-error>City is required!</mat-error>
City is required!
</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="34"> <mat-form-field fxFlex="34">
<input matInput placeholder="State" formControlName="state" required> <input matInput placeholder="State" formControlName="state" required>
<mat-error *ngIf="formErrors.state.required"> <mat-error>State is required!</mat-error>
State is required!
</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="33"> <mat-form-field fxFlex="33">
<input matInput #postalCode placeholder="Postal Code" value="94043" <input matInput #postalCode placeholder="Postal Code" value="94043"
formControlName="postalCode" required> formControlName="postalCode" maxlength="5" required>
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint> <mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
<mat-error *ngIf="formErrors.postalCode.maxlength"> <mat-error>Postal Code is required!</mat-error>
Postal Code needs to be max. {{formErrors.postalCode.maxlength.requiredLength}} characters
</mat-error>
<mat-error *ngIf="formErrors.postalCode.required">
Postal Code is required!
</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -135,9 +118,7 @@
Turkey Turkey
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="formErrors.country.required"> <mat-error>Country is required!</mat-error>
Country is required!
</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -146,11 +127,9 @@
<!-- / REACTIVE FORM EXAMPLE --> <!-- / REACTIVE FORM EXAMPLE -->
<div class="form-errors-model mat-white-bg p-24 mat-elevation-z4"> <div class="form-errors-model p-24 mat-elevation-z4">
<div class="h2 mb-24">Reactive Form Model</div>
<div class="h2 mb-24">Reactive Form Errors Model</div> <pre><code>{{form.getRawValue() | json}}</code></pre>
<pre><code>{{formErrors | json}}</code></pre>
</div> </div>
</div> </div>
@ -171,24 +150,20 @@
<mat-step [stepControl]="horizontalStepperStep1"> <mat-step [stepControl]="horizontalStepperStep1">
<form [formGroup]="horizontalStepperStep1"> <form fxLayout="column" [formGroup]="horizontalStepperStep1">
<ng-template matStepLabel>Fill out your name</ng-template> <ng-template matStepLabel>Fill out your name</ng-template>
<div fxFlex="1 0 auto" fxLayout="row"> <div fxFlex="1 0 auto" fxLayout="column">
<mat-form-field fxFlex="50"> <mat-form-field fxFlex="100">
<input matInput placeholder="First name" formControlName="firstName" required> <input matInput placeholder="First name" formControlName="firstName" required>
<mat-error *ngIf="horizontalStepperStep1Errors.firstName.required"> <mat-error>First Name is required!</mat-error>
First Name is required!
</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="50"> <mat-form-field fxFlex="100">
<input matInput placeholder="Last name" formControlName="lastName" required> <input matInput placeholder="Last name" formControlName="lastName" required>
<mat-error *ngIf="formErrors.lastName.required"> <mat-error>Last Name is required!</mat-error>
Last Name is required!
</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -205,7 +180,7 @@
<mat-step [stepControl]="horizontalStepperStep2"> <mat-step [stepControl]="horizontalStepperStep2">
<form [formGroup]="horizontalStepperStep2"> <form fxLayout="column" [formGroup]="horizontalStepperStep2">
<ng-template matStepLabel>Fill out your address</ng-template> <ng-template matStepLabel>Fill out your address</ng-template>
@ -215,9 +190,7 @@
<textarea matInput placeholder="Address" formControlName="address" required> <textarea matInput placeholder="Address" formControlName="address" required>
1600 Amphitheatre Pkwy 1600 Amphitheatre Pkwy
</textarea> </textarea>
<mat-error *ngIf="horizontalStepperStep2Errors.address.required"> <mat-error>Address is required!</mat-error>
Address is required!
</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -237,37 +210,27 @@
<mat-step [stepControl]="horizontalStepperStep3"> <mat-step [stepControl]="horizontalStepperStep3">
<form [formGroup]="horizontalStepperStep3"> <form fxLayout="column" [formGroup]="horizontalStepperStep3">
<ng-template matStepLabel>Fill out your address</ng-template> <ng-template matStepLabel>Fill out your address</ng-template>
<div fxFlex="1 0 auto" fxLayout="row"> <div fxFlex="1 0 auto" fxLayout="column">
<mat-form-field fxFlex="33"> <mat-form-field fxFlex="100">
<input matInput placeholder="City" formControlName="city" required> <input matInput placeholder="City" formControlName="city" required>
<mat-error *ngIf="horizontalStepperStep3Errors.city.required"> <mat-error>City is required!</mat-error>
City is required!
</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="34"> <mat-form-field fxFlex="100">
<input matInput placeholder="State" formControlName="state" required> <input matInput placeholder="State" formControlName="state" required>
<mat-error *ngIf="horizontalStepperStep3Errors.state.required"> <mat-error>State is required!</mat-error>
State is required!
</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="33"> <mat-form-field fxFlex="100">
<input matInput #postalCode placeholder="Postal Code" formControlName="postalCode" <input matInput #postalCode placeholder="Postal Code" formControlName="postalCode"
required> maxlength="5" required>
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint> <mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
<mat-error *ngIf="horizontalStepperStep3Errors.postalCode.maxlength"> <mat-error>Postal Code is required!</mat-error>
Postal Code needs to be max.
{{horizontalStepperStep3Errors.postalCode.maxlength.requiredLength}} characters
</mat-error>
<mat-error *ngIf="horizontalStepperStep3Errors.postalCode.required">
Postal Code is required!
</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -325,24 +288,20 @@
<mat-step [stepControl]="verticalStepperStep1"> <mat-step [stepControl]="verticalStepperStep1">
<form [formGroup]="verticalStepperStep1"> <form fxLayout="column" [formGroup]="verticalStepperStep1">
<ng-template matStepLabel>Fill out your name</ng-template> <ng-template matStepLabel>Fill out your name</ng-template>
<div fxFlex="1 0 auto" fxLayout="row"> <div fxFlex="1 0 auto" fxLayout="column">
<mat-form-field fxFlex="50"> <mat-form-field fxFlex="100">
<input matInput placeholder="First name" formControlName="firstName" required> <input matInput placeholder="First name" formControlName="firstName" required>
<mat-error *ngIf="verticalStepperStep1Errors.firstName.required"> <mat-error>First Name is required!</mat-error>
First Name is required!
</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="50"> <mat-form-field fxFlex="100">
<input matInput placeholder="Last name" formControlName="lastName" required> <input matInput placeholder="Last name" formControlName="lastName" required>
<mat-error *ngIf="formErrors.lastName.required"> <mat-error>Last Name is required!</mat-error>
Last Name is required!
</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -359,7 +318,7 @@
<mat-step [stepControl]="verticalStepperStep2"> <mat-step [stepControl]="verticalStepperStep2">
<form [formGroup]="verticalStepperStep2"> <form fxLayout="column" [formGroup]="verticalStepperStep2">
<ng-template matStepLabel>Fill out your address</ng-template> <ng-template matStepLabel>Fill out your address</ng-template>
@ -369,9 +328,7 @@
<textarea matInput placeholder="Address" formControlName="address" required> <textarea matInput placeholder="Address" formControlName="address" required>
1600 Amphitheatre Pkwy 1600 Amphitheatre Pkwy
</textarea> </textarea>
<mat-error *ngIf="verticalStepperStep2Errors.address.required"> <mat-error>Address is required!</mat-error>
Address is required!
</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -391,37 +348,27 @@
<mat-step [stepControl]="verticalStepperStep3"> <mat-step [stepControl]="verticalStepperStep3">
<form [formGroup]="verticalStepperStep3"> <form fxLayout="column" [formGroup]="verticalStepperStep3">
<ng-template matStepLabel>Fill out your address</ng-template> <ng-template matStepLabel>Fill out your address</ng-template>
<div fxFlex="1 0 auto" fxLayout="row"> <div fxFlex="1 0 auto" fxLayout="row">
<mat-form-field fxFlex="33"> <mat-form-field fxFlex="100">
<input matInput placeholder="City" formControlName="city" required> <input matInput placeholder="City" formControlName="city" required>
<mat-error *ngIf="verticalStepperStep3Errors.city.required"> <mat-error>City is required!</mat-error>
City is required!
</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="34"> <mat-form-field fxFlex="100">
<input matInput placeholder="State" formControlName="state" required> <input matInput placeholder="State" formControlName="state" required>
<mat-error *ngIf="verticalStepperStep3Errors.state.required"> <mat-error>State is required!</mat-error>
State is required!
</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="33"> <mat-form-field fxFlex="100">
<input matInput #postalCode placeholder="Postal Code" formControlName="postalCode" <input matInput #postalCode placeholder="Postal Code" formControlName="postalCode"
required> maxlength="5" required>
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint> <mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
<mat-error *ngIf="verticalStepperStep3Errors.postalCode.maxlength"> <mat-error>Postal Code is required!</mat-error>
Postal Code needs to be max.
{{verticalStepperStep3Errors.postalCode.maxlength.requiredLength}} characters
</mat-error>
<mat-error *ngIf="verticalStepperStep3Errors.postalCode.required">
Postal Code is required!
</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>

120
src/app/main/ui/forms/forms.component.ts
View File

@ -1,7 +1,6 @@
import { Component, OnDestroy, OnInit } from '@angular/core'; import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@Component({ @Component({
selector : 'forms', selector : 'forms',
@ -11,23 +10,16 @@ import { takeUntil } from 'rxjs/operators';
export class FormsComponent implements OnInit, OnDestroy export class FormsComponent implements OnInit, OnDestroy
{ {
form: FormGroup; form: FormGroup;
formErrors: any;
// Horizontal Stepper // Horizontal Stepper
horizontalStepperStep1: FormGroup; horizontalStepperStep1: FormGroup;
horizontalStepperStep2: FormGroup; horizontalStepperStep2: FormGroup;
horizontalStepperStep3: FormGroup; horizontalStepperStep3: FormGroup;
horizontalStepperStep1Errors: any;
horizontalStepperStep2Errors: any;
horizontalStepperStep3Errors: any;
// Vertical Stepper // Vertical Stepper
verticalStepperStep1: FormGroup; verticalStepperStep1: FormGroup;
verticalStepperStep2: FormGroup; verticalStepperStep2: FormGroup;
verticalStepperStep3: FormGroup; verticalStepperStep3: FormGroup;
verticalStepperStep1Errors: any;
verticalStepperStep2Errors: any;
verticalStepperStep3Errors: any;
// Private // Private
private _unsubscribeAll: Subject<any>; private _unsubscribeAll: Subject<any>;
@ -41,51 +33,6 @@ export class FormsComponent implements OnInit, OnDestroy
private _formBuilder: FormBuilder private _formBuilder: FormBuilder
) )
{ {
// Reactive form errors
this.formErrors = {
company : {},
firstName : {},
lastName : {},
address : {},
address2 : {},
city : {},
state : {},
postalCode: {},
country : {}
};
// Horizontal Stepper form error
this.horizontalStepperStep1Errors = {
firstName: {},
lastName : {}
};
this.horizontalStepperStep2Errors = {
address: {}
};
this.horizontalStepperStep3Errors = {
city : {},
state : {},
postalCode: {}
};
// Vertical Stepper form error
this.verticalStepperStep1Errors = {
firstName: {},
lastName : {}
};
this.verticalStepperStep2Errors = {
address: {}
};
this.verticalStepperStep3Errors = {
city : {},
state : {},
postalCode: {}
};
// Set the private defaults // Set the private defaults
this._unsubscribeAll = new Subject(); this._unsubscribeAll = new Subject();
} }
@ -117,12 +64,6 @@ export class FormsComponent implements OnInit, OnDestroy
country : ['', Validators.required] country : ['', Validators.required]
}); });
this.form.valueChanges
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(() => {
this.onFormValuesChanged();
});
// Horizontal Stepper form steps // Horizontal Stepper form steps
this.horizontalStepperStep1 = this._formBuilder.group({ this.horizontalStepperStep1 = this._formBuilder.group({
firstName: ['', Validators.required], firstName: ['', Validators.required],
@ -139,24 +80,6 @@ export class FormsComponent implements OnInit, OnDestroy
postalCode: ['', [Validators.required, Validators.maxLength(5)]] postalCode: ['', [Validators.required, Validators.maxLength(5)]]
}); });
this.horizontalStepperStep1.valueChanges
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(() => {
this.onFormValuesChanged();
});
this.horizontalStepperStep2.valueChanges
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(() => {
this.onFormValuesChanged();
});
this.horizontalStepperStep3.valueChanges
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(() => {
this.onFormValuesChanged();
});
// Vertical Stepper form stepper // Vertical Stepper form stepper
this.verticalStepperStep1 = this._formBuilder.group({ this.verticalStepperStep1 = this._formBuilder.group({
firstName: ['', Validators.required], firstName: ['', Validators.required],
@ -172,24 +95,6 @@ export class FormsComponent implements OnInit, OnDestroy
state : ['', Validators.required], state : ['', Validators.required],
postalCode: ['', [Validators.required, Validators.maxLength(5)]] postalCode: ['', [Validators.required, Validators.maxLength(5)]]
}); });
this.verticalStepperStep1.valueChanges
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(() => {
this.onFormValuesChanged();
});
this.verticalStepperStep2.valueChanges
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(() => {
this.onFormValuesChanged();
});
this.verticalStepperStep3.valueChanges
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(() => {
this.onFormValuesChanged();
});
} }
/** /**
@ -206,31 +111,6 @@ export class FormsComponent implements OnInit, OnDestroy
// @ Public methods // @ Public methods
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
/**
* On form values changed
*/
onFormValuesChanged(): void
{
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;
}
}
}
/** /**
* Finish the horizontal stepper * Finish the horizontal stepper
*/ */