From 0758de0da0d76a032ed0c6b0631310ea7e202ac2 Mon Sep 17 00:00:00 2001 From: Riccardo Andreatta Date: Sat, 5 Sep 2020 20:59:23 +0100 Subject: [PATCH 1/6] Added NgFormly dependency to create forms easily --- package.json | 5 ++++- src/app/app.module.ts | 18 +++++++++++++++++- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 9c85624..d45c845 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,9 @@ "@angular/platform-browser": "~10.0.14", "@angular/platform-browser-dynamic": "~10.0.14", "@angular/router": "~10.0.14", + "@ngx-formly/bootstrap": "^5.0.0", + "@ngx-formly/core": "^5.0.0", + "@ngx-formly/schematics": "^5.10.0", "bootstrap": "^4.5.0", "rxjs": "~6.5.4", "tslib": "^2.0.0", @@ -44,4 +47,4 @@ "tslint": "~6.1.0", "typescript": "~3.9.7" } -} \ No newline at end of file +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 98f3392..bfa34e6 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -2,6 +2,9 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpClientModule } from '@angular/common/http'; +import { ReactiveFormsModule } from '@angular/forms'; +import { FormlyModule } from '@ngx-formly/core'; +import { FormlyBootstrapModule } from '@ngx-formly/bootstrap'; import { AppRoutingModule } from './app-routing.module'; // Page Components import { HomePageComponent } from './pages/home-page/home-page.component'; @@ -36,7 +39,20 @@ import { PanelComponent } from './components/panel/panel.component'; imports: [ BrowserModule, AppRoutingModule, - HttpClientModule + HttpClientModule, + ReactiveFormsModule, + FormlyModule.forRoot({ + extras: { + lazyRender: true + }, + validationMessages: [ + { + name: 'required', + message: 'This field is required' + } + ] + }), + FormlyBootstrapModule ], providers: [], bootstrap: [AppComponent] From b48bde966021e0d177b35287eaf77e8460a75461 Mon Sep 17 00:00:00 2001 From: Riccardo Andreatta Date: Sat, 5 Sep 2020 21:08:09 +0100 Subject: [PATCH 2/6] NgFormly used in the view --- .../brushes-page/brushes-page.component.html | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/app/pages/brushes-page/brushes-page.component.html b/src/app/pages/brushes-page/brushes-page.component.html index ee40a64..20b9637 100644 --- a/src/app/pages/brushes-page/brushes-page.component.html +++ b/src/app/pages/brushes-page/brushes-page.component.html @@ -4,5 +4,18 @@ >
- brushes-page works! +
+ + + +
From 2149078f2e736ca91c4201bddb4a12159adedf5e Mon Sep 17 00:00:00 2001 From: Riccardo Andreatta Date: Sat, 5 Sep 2020 21:08:31 +0100 Subject: [PATCH 3/6] NgFormly configuration in the component --- .../brushes-page/brushes-page.component.ts | 104 +++++++++++++++++- 1 file changed, 98 insertions(+), 6 deletions(-) diff --git a/src/app/pages/brushes-page/brushes-page.component.ts b/src/app/pages/brushes-page/brushes-page.component.ts index 6f84b41..f816a05 100644 --- a/src/app/pages/brushes-page/brushes-page.component.ts +++ b/src/app/pages/brushes-page/brushes-page.component.ts @@ -1,4 +1,6 @@ -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { FormGroup } from '@angular/forms'; +import { FormlyFieldConfig } from '@ngx-formly/core'; @Component({ selector: 'ra-brushes-page', @@ -6,11 +8,101 @@ import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; styleUrls: ['./brushes-page.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class BrushesPageComponent implements OnInit { +export class BrushesPageComponent { + public form = new FormGroup({}); + public model = { + email: 'email@gmail.com' + }; + public fields: FormlyFieldConfig[] = [ + { + key: 'fullName', + type: 'input', + templateOptions: { + label: 'Full Name:', + placeholder: 'e.g. John Smith', + required: true + } + }, + { + key: 'email', + type: 'input', + templateOptions: { + label: 'Email Address:', + placeholder: 'e.g. john.dove@email.com', + required: true + } + }, + { + key: 'phone', + type: 'input', + templateOptions: { + label: 'Phone Number', + placeholder: 'e.g. 07440 12346', + required: true + } + }, + { + key: 'bithDate', + type: 'input', + templateOptions: { + label: 'User Date of Birth:', + placeholder: 'e.g. 01/01/1970', + required: true + } + }, + { + key: 'select', + type: 'select', + templateOptions: { + label: 'Country', + placeholder: 'Select your country', + required: true, + options: [ + { value: 'FR', label: 'France' }, + { value: 'IT', label: 'Italy' }, + { value: 'DE', label: 'Germany' }, + { value: 'ES', label: 'Spain' }, + { value: 'UK', label: 'United Kingdom' }, + { value: 'US', label: 'United States' } + ] + } + }, + { + key: 'checkbox', + type: 'checkbox', + templateOptions: { + label: 'Current products used:', + required: true, + options: [ + { value: 1, label: 'Slightly' }, + { value: 2, label: 'Moderate' }, + { value: 3, label: 'Severe' }, + { value: 4, label: 'Very severe' }, + { value: 5, label: 'Extremely severe' } + ] + } + }, + { + key: 'radio', + type: 'radio', + templateOptions: { + label: 'Approximately how oily is your skin?', + required: true, + options: [ + { value: 1, label: 'Slightly' }, + { value: 2, label: 'Moderate' }, + { value: 3, label: 'Severe' }, + { value: 4, label: 'Very severe' }, + { value: 5, label: 'Extremely severe' } + ] + } + } + ]; - constructor() { } - - ngOnInit(): void { + public onSubmit() { + if (this.form.valid) { + alert(JSON.stringify(this.model, null, 2)); + } + console.log('this.model', this.model); } - } From a5f2a6eeff5573efef8dfc8219127f279f6a4d1a Mon Sep 17 00:00:00 2001 From: Riccardo Andreatta Date: Sun, 6 Sep 2020 02:14:05 +0100 Subject: [PATCH 4/6] NgFormly config with all the form groups required and basic stylings --- .../brushes-page/brushes-page.component.scss | 28 +++++++++++++++++++ .../brushes-page/brushes-page.component.ts | 20 ++++++++++++- 2 files changed, 47 insertions(+), 1 deletion(-) diff --git a/src/app/pages/brushes-page/brushes-page.component.scss b/src/app/pages/brushes-page/brushes-page.component.scss index ac4ed7f..7720348 100644 --- a/src/app/pages/brushes-page/brushes-page.component.scss +++ b/src/app/pages/brushes-page/brushes-page.component.scss @@ -1 +1,29 @@ @import '~src/styles.scss'; + +::ng-deep { + .form { + &__input, + &__select, + &__radio, + &__checkbox { + .form-group { + padding: 10px 0; + } + + .invalid-feedback { + font-size: 12px; + color: $brown; + } + } + } +} + +.button { + background-color: $brown; + border: 1px solid $brown; + border-radius: $border-radius; + color: $white; + font-size: 14px; + line-height: 16px; + padding: 16px 32px; +} \ No newline at end of file diff --git a/src/app/pages/brushes-page/brushes-page.component.ts b/src/app/pages/brushes-page/brushes-page.component.ts index f816a05..50a5d8d 100644 --- a/src/app/pages/brushes-page/brushes-page.component.ts +++ b/src/app/pages/brushes-page/brushes-page.component.ts @@ -17,6 +17,7 @@ export class BrushesPageComponent { { key: 'fullName', type: 'input', + className: 'form__input', templateOptions: { label: 'Full Name:', placeholder: 'e.g. John Smith', @@ -26,6 +27,7 @@ export class BrushesPageComponent { { key: 'email', type: 'input', + className: 'form__input', templateOptions: { label: 'Email Address:', placeholder: 'e.g. john.dove@email.com', @@ -35,6 +37,7 @@ export class BrushesPageComponent { { key: 'phone', type: 'input', + className: 'form__input', templateOptions: { label: 'Phone Number', placeholder: 'e.g. 07440 12346', @@ -44,15 +47,28 @@ export class BrushesPageComponent { { key: 'bithDate', type: 'input', + className: 'form__input', templateOptions: { label: 'User Date of Birth:', placeholder: 'e.g. 01/01/1970', required: true } }, + // { + // key: 'date', + // type: 'datepicker', + // className: 'form__date-picker', + // templateOptions: { + // label: 'User Date of Birth:', + // placeholder: 'e.g. 01/01/1970', + // required: true + // } + // // parsers: [toDateParser] + // }, { key: 'select', type: 'select', + className: 'form__select', templateOptions: { label: 'Country', placeholder: 'Select your country', @@ -69,7 +85,8 @@ export class BrushesPageComponent { }, { key: 'checkbox', - type: 'checkbox', + type: 'multicheckbox', + className: 'form__checkbox', templateOptions: { label: 'Current products used:', required: true, @@ -85,6 +102,7 @@ export class BrushesPageComponent { { key: 'radio', type: 'radio', + className: 'form__radio', templateOptions: { label: 'Approximately how oily is your skin?', required: true, From cc1356284f3f3afbb9c6d77f476d8161200b6f5e Mon Sep 17 00:00:00 2001 From: Riccardo Andreatta Date: Sun, 6 Sep 2020 19:22:19 +0100 Subject: [PATCH 5/6] Placeholder typo --- src/app/pages/brushes-page/brushes-page.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/pages/brushes-page/brushes-page.component.ts b/src/app/pages/brushes-page/brushes-page.component.ts index 50a5d8d..5f76650 100644 --- a/src/app/pages/brushes-page/brushes-page.component.ts +++ b/src/app/pages/brushes-page/brushes-page.component.ts @@ -40,7 +40,7 @@ export class BrushesPageComponent { className: 'form__input', templateOptions: { label: 'Phone Number', - placeholder: 'e.g. 07440 12346', + placeholder: 'e.g. 07440 123456', required: true } }, From bcde04249f188d9ef4806c076a30e58fb0189de7 Mon Sep 17 00:00:00 2001 From: Riccardo Andreatta Date: Tue, 15 Sep 2020 17:43:52 +0100 Subject: [PATCH 6/6] Navigation component improved --- .../navigation/navigation.component.html | 15 +++++---------- .../navigation/navigation.component.scss | 1 + 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/app/components/navigation/navigation.component.html b/src/app/components/navigation/navigation.component.html index 0fd204d..27f9883 100644 --- a/src/app/components/navigation/navigation.component.html +++ b/src/app/components/navigation/navigation.component.html @@ -11,24 +11,19 @@ [routerLinkActive]="['active']" (click)="isMobile ? showMenu = false : showMenu = true" > - {{ nav.menuLabel }} + + {{ nav.menuLabel }} +
- Menu -
-
- Close + {{ showMenu ? 'Close' : 'Menu' }}
diff --git a/src/app/components/navigation/navigation.component.scss b/src/app/components/navigation/navigation.component.scss index 49603b2..c42cadf 100644 --- a/src/app/components/navigation/navigation.component.scss +++ b/src/app/components/navigation/navigation.component.scss @@ -47,6 +47,7 @@ } &__mobile-button { + @include user-select(none); position: absolute; top: 16px; right: 16px;