Add form using NgxFormly in the Brushes page

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"
     }
-}
+}

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]

src/app/components/navigation/navigation.component.html

@@ -11,24 +11,19 @@
                     [routerLinkActive]="['active']"
                     (click)="isMobile ? showMenu = false : showMenu = true"
                 >
-                    <span class="navigation__menu--element__label">{{ nav.menuLabel }}</span>
+                    <span class="navigation__menu--element__label">
+                        {{ nav.menuLabel }}
+                    </span>
                 </a>
             </li>
         </ul>
     </ng-container>
 
     <div
-        *ngIf="isMobile && !showMenu"
+        *ngIf="isMobile"
         class="navigation__mobile-button"
         (click)="toggleMobileMenu()"
     >
-        Menu
-    </div>
-    <div
-        *ngIf="isMobile && showMenu"
-        class="navigation__mobile-button"
-        (click)="toggleMobileMenu()"
-    >
-        Close
+        {{ showMenu ? 'Close' : 'Menu' }}
     </div>
 </nav>

src/app/components/navigation/navigation.component.scss

@@ -47,6 +47,7 @@
     }
 
     &__mobile-button {
+        @include user-select(none);
         position: absolute;
         top: 16px;
         right: 16px;

src/app/pages/brushes-page/brushes-page.component.html

@@ -4,5 +4,18 @@
 ></ra-hero>
 
 <main class="page">
-    brushes-page works!
+    <form
+        [formGroup]="form"
+        (ngSubmit)="onSubmit()"
+    >
+        <formly-form
+            [form]="form"
+            [model]="model"
+            [fields]="fields"
+        ></formly-form>
+
+        <button type="submit" class="button">
+            Submit
+        </button>
+    </form>
 </main>

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;
+}

src/app/pages/brushes-page/brushes-page.component.ts

@@ -1,16 +1,126 @@
-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',
     templateUrl: './brushes-page.component.html',
     styleUrls: ['./brushes-page.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class BrushesPageComponent implements OnInit {
+export class BrushesPageComponent {
+    public form = new FormGroup({});
+    public model = {
+        email: '[email protected]'
+    };
+    public fields: FormlyFieldConfig[] = [
+        {
+            key: 'fullName',
+            type: 'input',
+            className: 'form__input',
+            templateOptions: {
+                label: 'Full Name:',
+                placeholder: 'e.g. John Smith',
+                required: true
+            }
+        },
+        {
+            key: 'email',
+            type: 'input',
+            className: 'form__input',
+            templateOptions: {
+                label: 'Email Address:',
+                placeholder: 'e.g. [email protected]',
+                required: true
+            }
+        },
+        {
+            key: 'phone',
+            type: 'input',
+            className: 'form__input',
+            templateOptions: {
+                label: 'Phone Number',
+                placeholder: 'e.g. 07440 123456',
+                required: true
+            }
+        },
+        {
+            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',
+                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: 'multicheckbox',
+            className: 'form__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',
+            className: 'form__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);
     }
-
 }