From a65f61cce408feb2cf3c765d68b0ee914d4b1b65 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Thu, 30 Nov 2017 15:37:32 +0300 Subject: [PATCH] Form Stepper examples + Simplified the mat-select style + Further simplified the mat-select in dashboard widgets --- .../components/widget/widget.component.scss | 19 + .../components/widget/widget.component.ts | 4 +- .../scss/partials/_angular-material-fix.scss | 48 +++ .../content/ui/forms/forms.component.html | 374 +++++++++++++++++- .../content/ui/forms/forms.component.scss | 5 + .../main/content/ui/forms/forms.component.ts | 120 +++++- 6 files changed, 555 insertions(+), 15 deletions(-) diff --git a/src/app/core/components/widget/widget.component.scss b/src/app/core/components/widget/widget.component.scss index d5d54a89..150f83fd 100644 --- a/src/app/core/components/widget/widget.component.scss +++ b/src/app/core/components/widget/widget.component.scss @@ -62,4 +62,23 @@ fuse-widget { transform: rotateY(360deg); } } + + .mat-form-field { + + &.mat-form-field-type-mat-select { + + .mat-input-wrapper { + padding: 16px 0; + + .mat-input-infix { + border: none; + padding: 0; + } + } + + .mat-input-underline { + display: none; + } + } + } } diff --git a/src/app/core/components/widget/widget.component.ts b/src/app/core/components/widget/widget.component.ts index e92e07e6..659dcc62 100644 --- a/src/app/core/components/widget/widget.component.ts +++ b/src/app/core/components/widget/widget.component.ts @@ -27,7 +27,9 @@ export class FuseWidgetComponent implements OnInit, AfterContentInit setTimeout(() => { this.toggleButtons.forEach(flipButton => { - this.renderer.listen(flipButton.el.nativeElement, 'click', () => { + this.renderer.listen(flipButton.el.nativeElement, 'click', (event) => { + event.preventDefault(); + event.stopPropagation(); this.toggle(); }); }); diff --git a/src/app/core/scss/partials/_angular-material-fix.scss b/src/app/core/scss/partials/_angular-material-fix.scss index 55d10a59..5358bd1f 100644 --- a/src/app/core/scss/partials/_angular-material-fix.scss +++ b/src/app/core/scss/partials/_angular-material-fix.scss @@ -28,3 +28,51 @@ .mat-form-field-underline { background-color: rgba(0, 0, 0, 0.12); } + +// Fix: "Some idiots using table-cell and inline-table in mat-select" +.mat-form-field { + + &.mat-form-field-type-mat-select { + + .mat-input-infix { + display: inline-flex; + width: auto; + + .mat-select-trigger { + display: inline-flex; + align-items: center; + width: 100%; + + .mat-select-value { + display: flex; + max-width: none; + margin-right: 8px; + } + + .mat-select-arrow-wrapper { + display: inline-flex; + } + } + } + } +} + +// Fix: "Stepper icons are broken due to Fuse's icon helpers" +mat-horizontal-stepper, +mat-vertical-stepper { + + mat-step-header { + + mat-icon { + height: 16px !important; + width: 16px !important; + min-width: 0 !important; + min-height: 0 !important; + color: rgba(255, 255, 255, 0.87) !important; + } + } +} + +mat-vertical-stepper { + padding: 16px 0; +} \ No newline at end of file diff --git a/src/app/main/content/ui/forms/forms.component.html b/src/app/main/content/ui/forms/forms.component.html index 011fc14b..779ded79 100644 --- a/src/app/main/content/ui/forms/forms.component.html +++ b/src/app/main/content/ui/forms/forms.component.html @@ -16,7 +16,11 @@
-

+

+ Reactive Forms +
+ +

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 @@ -25,6 +29,8 @@

+ +
@@ -41,16 +47,16 @@
- + - Required + First Name is required! - + - Required + Last Name is required! @@ -59,18 +65,18 @@
- - Required + Address is required! - Required + Address 2 is required! @@ -79,32 +85,67 @@
- + - Required + City is required! - + - Required + State is required! + formControlName="postalCode" required> {{postalCode.value.length}} / 5 Postal Code needs to be max. {{formErrors.postalCode.maxlength.requiredLength}} characters + + Postal Code is required! + + + +
+ +
+ + + + + United States of America + + + United Kingdom + + + Russia + + + China + + + Japan + + + Turkey + + + + Country is required! +
+ +
Reactive Form Errors Model
@@ -114,6 +155,313 @@
+
+ Horizontal Stepper +
+ +

+ Angular Material's stepper provides a wizard-like workflow by dividing content into logical steps. + mat-horizontal-stepper selector can be used to create a horizontal stepper. +

+ +
+ + + + + + +
+ + Fill out your name + +
+ + + + + First Name is required! + + + + + + + Last Name is required! + + + +
+ +
+ +
+ +
+ + + + + +
+ + Fill out your address + +
+ + + + + Address is required! + + + +
+ +
+ + +
+ +
+ + + + + +
+ + Fill out your address + +
+ + + + + City is required! + + + + + + + State is required! + + + + + + {{postalCode.value.length}} / 5 + + Postal Code needs to be max. + {{horizontalStepperStep3Errors.postalCode.maxlength.requiredLength}} characters + + + Postal Code is required! + + + +
+ +
+ + +
+ +
+ + + + + + Done + +
+ Thank your for filling out our form. +
+ +
+ + +
+ + + + + + +
+ +
+ Vertical Stepper +
+ +

+ Angular Material's stepper provides a wizard-like workflow by dividing content into logical steps. + mat-vertical-stepper can be used to create a vertical stepper. +

+ +
+ + + + + + +
+ + Fill out your name + +
+ + + + + First Name is required! + + + + + + + Last Name is required! + + + +
+ +
+ +
+ +
+ + + + + +
+ + Fill out your address + +
+ + + + + Address is required! + + + +
+ +
+ + +
+ +
+ + + + + +
+ + Fill out your address + +
+ + + + + City is required! + + + + + + + State is required! + + + + + + {{postalCode.value.length}} / 5 + + Postal Code needs to be max. + {{verticalStepperStep3Errors.postalCode.maxlength.requiredLength}} characters + + + Postal Code is required! + + + +
+ +
+ + +
+ +
+ + + + + + Done + +
+ Thank your for filling out our form. +
+ +
+ + +
+ + + + + + +
diff --git a/src/app/main/content/ui/forms/forms.component.scss b/src/app/main/content/ui/forms/forms.component.scss index 63daaf10..be77d755 100644 --- a/src/app/main/content/ui/forms/forms.component.scss +++ b/src/app/main/content/ui/forms/forms.component.scss @@ -14,5 +14,10 @@ background: none !important; } } + + .horizontal-stepper-wrapper, + .vertical-stepper-wrapper { + max-width: 800px; + } } } \ No newline at end of file diff --git a/src/app/main/content/ui/forms/forms.component.ts b/src/app/main/content/ui/forms/forms.component.ts index e4c9c1b4..297701ed 100644 --- a/src/app/main/content/ui/forms/forms.component.ts +++ b/src/app/main/content/ui/forms/forms.component.ts @@ -11,14 +11,64 @@ export class FuseFormsComponent implements OnInit 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; + constructor(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: {} @@ -27,6 +77,7 @@ export class FuseFormsComponent implements OnInit ngOnInit() { + // Reactive Form this.form = this.formBuilder.group({ company : [ { @@ -40,12 +91,69 @@ export class FuseFormsComponent implements OnInit address2 : ['', Validators.required], city : ['', Validators.required], state : ['', Validators.required], - postalCode: ['', [Validators.required, Validators.maxLength(5)]] + postalCode: ['', [Validators.required, Validators.maxLength(5)]], + country : ['', Validators.required] }); this.form.valueChanges.subscribe(() => { this.onFormValuesChanged(); }); + + // Horizontal Stepper form steps + this.horizontalStepperStep1 = this.formBuilder.group({ + firstName: ['', Validators.required], + lastName : ['', Validators.required] + }); + + this.horizontalStepperStep2 = this.formBuilder.group({ + address: ['', Validators.required] + }); + + this.horizontalStepperStep3 = this.formBuilder.group({ + city : ['', Validators.required], + state : ['', Validators.required], + postalCode: ['', [Validators.required, Validators.maxLength(5)]] + }); + + this.horizontalStepperStep1.valueChanges.subscribe(() => { + this.onFormValuesChanged(); + }); + + this.horizontalStepperStep2.valueChanges.subscribe(() => { + this.onFormValuesChanged(); + }); + + this.horizontalStepperStep3.valueChanges.subscribe(() => { + this.onFormValuesChanged(); + }); + + // Vertical Stepper form stepper + this.verticalStepperStep1 = this.formBuilder.group({ + firstName: ['', Validators.required], + lastName : ['', Validators.required] + }); + + this.verticalStepperStep2 = this.formBuilder.group({ + address: ['', Validators.required] + }); + + this.verticalStepperStep3 = this.formBuilder.group({ + city : ['', Validators.required], + state : ['', Validators.required], + postalCode: ['', [Validators.required, Validators.maxLength(5)]] + }); + + this.verticalStepperStep1.valueChanges.subscribe(() => { + this.onFormValuesChanged(); + }); + + this.verticalStepperStep2.valueChanges.subscribe(() => { + this.onFormValuesChanged(); + }); + + this.verticalStepperStep3.valueChanges.subscribe(() => { + this.onFormValuesChanged(); + }); } onFormValuesChanged() @@ -69,4 +177,14 @@ export class FuseFormsComponent implements OnInit } } } + + finishHorizontalStepper() + { + alert('You have finished the horizontal stepper!'); + } + + finishVerticalStepper() + { + alert('You have finished the vertical stepper!'); + } }