mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-11-04 13:53:33 +00:00
(Forms) Simplified the form examples
This commit is contained in:
Sercan Yemen
parent
a52b1f7687
commit
927b4fd322
@ -1,7 +1,7 @@
|
||||
<div id="forms" class="page-layout simple fullwidth" fxLayout="column">
|
||||
|
||||
<!-- 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 class="black-fg" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="secondary-text s-18">home</mat-icon>
|
||||
@ -27,11 +27,11 @@
|
||||
reactive patterns, testing, and validation.
|
||||
</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 -->
|
||||
|
||||
<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">
|
||||
|
||||
<div class="h2 mb-24">Reactive Form Example</div>
|
||||
@ -48,16 +48,12 @@
|
||||
|
||||
<mat-form-field fxFlex="50">
|
||||
<input matInput placeholder="First name" formControlName="firstName" required>
|
||||
<mat-error *ngIf="formErrors.firstName.required">
|
||||
First Name is required!
|
||||
</mat-error>
|
||||
<mat-error>First Name is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="50">
|
||||
<input matInput placeholder="Last name" formControlName="lastName" required>
|
||||
<mat-error *ngIf="formErrors.lastName.required">
|
||||
Last Name is required!
|
||||
</mat-error>
|
||||
<mat-error>Last Name is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
@ -68,16 +64,12 @@
|
||||
<textarea matInput placeholder="Address" formControlName="address" required>
|
||||
1600 Amphitheatre Pkwy
|
||||
</textarea>
|
||||
<mat-error *ngIf="formErrors.address.required">
|
||||
Address is required!
|
||||
</mat-error>
|
||||
<mat-error>Address is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="100">
|
||||
<textarea matInput placeholder="Address 2" formControlName="address2"></textarea>
|
||||
<mat-error *ngIf="formErrors.address2.required">
|
||||
Address 2 is required!
|
||||
</mat-error>
|
||||
<mat-error>Address 2 is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
@ -86,28 +78,19 @@
|
||||
|
||||
<mat-form-field fxFlex="33">
|
||||
<input matInput placeholder="City" formControlName="city" required>
|
||||
<mat-error *ngIf="formErrors.city.required">
|
||||
City is required!
|
||||
</mat-error>
|
||||
<mat-error>City is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="34">
|
||||
<input matInput placeholder="State" formControlName="state" required>
|
||||
<mat-error *ngIf="formErrors.state.required">
|
||||
State is required!
|
||||
</mat-error>
|
||||
<mat-error>State is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="33">
|
||||
<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-error *ngIf="formErrors.postalCode.maxlength">
|
||||
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-error>Postal Code is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
@ -135,9 +118,7 @@
|
||||
Turkey
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="formErrors.country.required">
|
||||
Country is required!
|
||||
</mat-error>
|
||||
<mat-error>Country is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
@ -146,11 +127,9 @@
|
||||
|
||||
<!-- / REACTIVE FORM EXAMPLE -->
|
||||
|
||||
<div class="form-errors-model mat-white-bg p-24 mat-elevation-z4">
|
||||
|
||||
<div class="h2 mb-24">Reactive Form Errors Model</div>
|
||||
|
||||
<pre><code>{{formErrors | json}}</code></pre>
|
||||
<div class="form-errors-model p-24 mat-elevation-z4">
|
||||
<div class="h2 mb-24">Reactive Form Model</div>
|
||||
<pre><code>{{form.getRawValue() | json}}</code></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -171,24 +150,20 @@
|
||||
|
||||
<mat-step [stepControl]="horizontalStepperStep1">
|
||||
|
||||
<form [formGroup]="horizontalStepperStep1">
|
||||
<form fxLayout="column" [formGroup]="horizontalStepperStep1">
|
||||
|
||||
<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>
|
||||
<mat-error *ngIf="horizontalStepperStep1Errors.firstName.required">
|
||||
First Name is required!
|
||||
</mat-error>
|
||||
<mat-error>First Name is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="50">
|
||||
<mat-form-field fxFlex="100">
|
||||
<input matInput placeholder="Last name" formControlName="lastName" required>
|
||||
<mat-error *ngIf="formErrors.lastName.required">
|
||||
Last Name is required!
|
||||
</mat-error>
|
||||
<mat-error>Last Name is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
@ -205,7 +180,7 @@
|
||||
|
||||
<mat-step [stepControl]="horizontalStepperStep2">
|
||||
|
||||
<form [formGroup]="horizontalStepperStep2">
|
||||
<form fxLayout="column" [formGroup]="horizontalStepperStep2">
|
||||
|
||||
<ng-template matStepLabel>Fill out your address</ng-template>
|
||||
|
||||
@ -215,9 +190,7 @@
|
||||
<textarea matInput placeholder="Address" formControlName="address" required>
|
||||
1600 Amphitheatre Pkwy
|
||||
</textarea>
|
||||
<mat-error *ngIf="horizontalStepperStep2Errors.address.required">
|
||||
Address is required!
|
||||
</mat-error>
|
||||
<mat-error>Address is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
@ -237,37 +210,27 @@
|
||||
|
||||
<mat-step [stepControl]="horizontalStepperStep3">
|
||||
|
||||
<form [formGroup]="horizontalStepperStep3">
|
||||
<form fxLayout="column" [formGroup]="horizontalStepperStep3">
|
||||
|
||||
<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>
|
||||
<mat-error *ngIf="horizontalStepperStep3Errors.city.required">
|
||||
City is required!
|
||||
</mat-error>
|
||||
<mat-error>City is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="34">
|
||||
<mat-form-field fxFlex="100">
|
||||
<input matInput placeholder="State" formControlName="state" required>
|
||||
<mat-error *ngIf="horizontalStepperStep3Errors.state.required">
|
||||
State is required!
|
||||
</mat-error>
|
||||
<mat-error>State is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="33">
|
||||
<mat-form-field fxFlex="100">
|
||||
<input matInput #postalCode placeholder="Postal Code" formControlName="postalCode"
|
||||
required>
|
||||
maxlength="5" required>
|
||||
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
|
||||
<mat-error *ngIf="horizontalStepperStep3Errors.postalCode.maxlength">
|
||||
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-error>Postal Code is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
@ -325,24 +288,20 @@
|
||||
|
||||
<mat-step [stepControl]="verticalStepperStep1">
|
||||
|
||||
<form [formGroup]="verticalStepperStep1">
|
||||
<form fxLayout="column" [formGroup]="verticalStepperStep1">
|
||||
|
||||
<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>
|
||||
<mat-error *ngIf="verticalStepperStep1Errors.firstName.required">
|
||||
First Name is required!
|
||||
</mat-error>
|
||||
<mat-error>First Name is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="50">
|
||||
<mat-form-field fxFlex="100">
|
||||
<input matInput placeholder="Last name" formControlName="lastName" required>
|
||||
<mat-error *ngIf="formErrors.lastName.required">
|
||||
Last Name is required!
|
||||
</mat-error>
|
||||
<mat-error>Last Name is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
@ -359,7 +318,7 @@
|
||||
|
||||
<mat-step [stepControl]="verticalStepperStep2">
|
||||
|
||||
<form [formGroup]="verticalStepperStep2">
|
||||
<form fxLayout="column" [formGroup]="verticalStepperStep2">
|
||||
|
||||
<ng-template matStepLabel>Fill out your address</ng-template>
|
||||
|
||||
@ -369,9 +328,7 @@
|
||||
<textarea matInput placeholder="Address" formControlName="address" required>
|
||||
1600 Amphitheatre Pkwy
|
||||
</textarea>
|
||||
<mat-error *ngIf="verticalStepperStep2Errors.address.required">
|
||||
Address is required!
|
||||
</mat-error>
|
||||
<mat-error>Address is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
@ -391,37 +348,27 @@
|
||||
|
||||
<mat-step [stepControl]="verticalStepperStep3">
|
||||
|
||||
<form [formGroup]="verticalStepperStep3">
|
||||
<form fxLayout="column" [formGroup]="verticalStepperStep3">
|
||||
|
||||
<ng-template matStepLabel>Fill out your address</ng-template>
|
||||
|
||||
<div fxFlex="1 0 auto" fxLayout="row">
|
||||
|
||||
<mat-form-field fxFlex="33">
|
||||
<mat-form-field fxFlex="100">
|
||||
<input matInput placeholder="City" formControlName="city" required>
|
||||
<mat-error *ngIf="verticalStepperStep3Errors.city.required">
|
||||
City is required!
|
||||
</mat-error>
|
||||
<mat-error>City is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="34">
|
||||
<mat-form-field fxFlex="100">
|
||||
<input matInput placeholder="State" formControlName="state" required>
|
||||
<mat-error *ngIf="verticalStepperStep3Errors.state.required">
|
||||
State is required!
|
||||
</mat-error>
|
||||
<mat-error>State is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="33">
|
||||
<mat-form-field fxFlex="100">
|
||||
<input matInput #postalCode placeholder="Postal Code" formControlName="postalCode"
|
||||
required>
|
||||
maxlength="5" required>
|
||||
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
|
||||
<mat-error *ngIf="verticalStepperStep3Errors.postalCode.maxlength">
|
||||
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-error>Postal Code is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector : 'forms',
|
||||
@ -11,23 +10,16 @@ import { takeUntil } from 'rxjs/operators';
|
||||
export class FormsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
form: FormGroup;
|
||||
formErrors: any;
|
||||
|
||||
// Horizontal Stepper
|
||||
horizontalStepperStep1: FormGroup;
|
||||
horizontalStepperStep2: FormGroup;
|
||||
horizontalStepperStep3: FormGroup;
|
||||
horizontalStepperStep1Errors: any;
|
||||
horizontalStepperStep2Errors: any;
|
||||
horizontalStepperStep3Errors: any;
|
||||
|
||||
// Vertical Stepper
|
||||
verticalStepperStep1: FormGroup;
|
||||
verticalStepperStep2: FormGroup;
|
||||
verticalStepperStep3: FormGroup;
|
||||
verticalStepperStep1Errors: any;
|
||||
verticalStepperStep2Errors: any;
|
||||
verticalStepperStep3Errors: any;
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
@ -41,51 +33,6 @@ export class FormsComponent implements OnInit, OnDestroy
|
||||
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
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
@ -117,12 +64,6 @@ export class FormsComponent implements OnInit, OnDestroy
|
||||
country : ['', Validators.required]
|
||||
});
|
||||
|
||||
this.form.valueChanges
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
this.onFormValuesChanged();
|
||||
});
|
||||
|
||||
// Horizontal Stepper form steps
|
||||
this.horizontalStepperStep1 = this._formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
@ -139,24 +80,6 @@ export class FormsComponent implements OnInit, OnDestroy
|
||||
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
|
||||
this.verticalStepperStep1 = this._formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
@ -172,24 +95,6 @@ export class FormsComponent implements OnInit, OnDestroy
|
||||
state : ['', Validators.required],
|
||||
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
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user