Merge pull request #2 from raymonschouwenaar/step-5-create-simple-form

Step 5 create simple form

.editorconfig

@@ -3,8 +3,8 @@ root = true
 
 [*]
 charset = utf-8
-indent_style = space
-indent_size = 2
+indent_style = tab
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 

angular.json

@@ -25,7 +25,8 @@
             "aot": true,
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/_redirects"
             ],
             "styles": [
               "src/styles.scss"

netlify.toml

@@ -0,0 +1,6 @@
+[build]
+  command = "npm run build:prod"
+  publish = "dist/angular-ngx-formly-material"
+
+[context.deploy-preview]
+  command = "npm run build-preview"

package.json

@@ -5,35 +5,38 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "build:prod": "ng build --prod",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
     "@angular/animations": "~9.0.0",
+    "@angular/cdk": "^9.1.1",
     "@angular/common": "~9.0.0",
     "@angular/compiler": "~9.0.0",
     "@angular/core": "~9.0.0",
     "@angular/forms": "~9.0.0",
+    "@angular/material": "^9.1.1",
     "@angular/platform-browser": "~9.0.0",
     "@angular/platform-browser-dynamic": "~9.0.0",
     "@angular/router": "~9.0.0",
+    "@ngx-formly/core": "^5.0.0",
+    "@ngx-formly/material": "^5.0.0",
     "@ngx-formly/schematics": "^5.5.13",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
-    "zone.js": "~0.10.2",
-    "@ngx-formly/core": "^5.0.0",
-    "@ngx-formly/material": "^5.0.0"
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.900.1",
     "@angular/cli": "~9.0.1",
     "@angular/compiler-cli": "~9.0.0",
     "@angular/language-service": "~9.0.0",
-    "@types/node": "^12.11.1",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
     "codelyzer": "^5.1.2",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
@@ -45,6 +48,7 @@
     "protractor": "~5.4.3",
     "ts-node": "~8.3.0",
     "tslint": "~5.18.0",
+    "tslint-config-prettier": "^1.18.0",
     "typescript": "~3.7.5"
   }
 }

prettier.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+	"printWidth": 100,
+	"singleQuote": true,
+	"useTabs": true,
+	"tabWidth": 4,
+	"semi": false,
+	"bracketSpacing": true,
+	"trailingComma": "all",
+	"arrowParens": "always",
+	"endOfLine": "auto",
+	"overrides": [
+		{
+			"files": ["*.yaml", "*.yml"],
+			"options": {
+				"tabWidth": 2,
+				"useTabs": false,
+				"singleQuote": false
+			}
+		}
+	]
+})

src/_redirects

@@ -0,0 +1 @@
+/*    /index.html    200

src/app/app.component.scss

@@ -0,0 +1,9 @@
+.container {
+    max-width: 700px;
+    margin: 0 auto   
+}
+
+formly-form {
+    display: block;
+    margin-bottom: 2rem;
+}

src/app/app.component.ts

@@ -1,10 +1,120 @@
-import { Component } from '@angular/core';
+import { Component } from '@angular/core'
+import { FormGroup } from '@angular/forms'
+import { FormlyFieldConfig } from '@ngx-formly/core'
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+	selector: 'app-root',
+	// templateUrl: './app.component.html',
+	template: `
+		<div class="container">
+      <h1>{{ title }}</h1>
+      <p>This is an example form based on the Medium tutorial.</p>
+
+			<form [formGroup]="form" (ngSubmit)="onSubmit()">
+				<formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
+				<button type="submit" mat-raised-button color="primary" class="button--submit">Submit</button>
+      </form>
+      <pre>
+        {{model | json}}
+      </pre>
+		</div>
+	`,
+	styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  title = 'angular-ngx-formly-material';
+	title = 'Angular NGX-Formly with Material'
+	form = new FormGroup({})
+	model = { 
+    email: "email@gmail.com",
+    terms_1: false,
+    terms: true,
+    date_of_birth: new Date(),
+    amount: 100,
+    name: "lskdfnlksdf",
+    description: "laksndlkansd↵asd↵nlkxclkzxc↵",
+    gender: 3 
+  }
+	fields: FormlyFieldConfig[] = [
+    {
+      key: 'name',
+      type: 'input',
+      templateOptions: {
+        label: 'Name',
+        placeholder: 'Enter name',
+      }
+    },
+    {
+      key: 'email',
+      type: 'input',
+      templateOptions: {
+        type: 'email',
+        label: 'Email',
+        placeholder: 'Enter email',
+      }
+    },
+    {
+      key: 'amount',
+      type: 'input',
+      templateOptions: {
+        type: 'number',
+        label: 'Amount',
+        placeholder: 'Enter amount',
+      }
+    },
+    {
+      key: 'date_of_birth',
+      type: 'datepicker',
+      templateOptions: {
+        label: 'Datepicker',
+        placeholder: 'Placeholder',
+        description: 'Description',
+        required: true,
+      },
+    },
+    {
+      key: 'terms',
+      type: 'checkbox',
+      templateOptions: {
+        label: 'Accept terms',
+        description: 'Please accept our terms',
+        required: true,
+      },
+    },
+    {
+      key: 'terms_1',
+      type: 'toggle',
+      templateOptions: {
+        label: 'Accept terms',
+        description: 'Please accept our terms',
+        required: true,
+      },
+    },
+    {
+      key: 'description',
+      type: 'textarea',
+      templateOptions: {
+        label: 'Description',
+        placeholder: 'Enter description',
+      }
+    },
+    {
+      key: 'gender',
+      type: 'radio',
+      templateOptions: {
+        label: 'Gender',
+        placeholder: 'Placeholder',
+        description: 'Fill in your gender',
+        options: [
+          { value: 1, label: 'Male' },
+          { value: 2, label: 'Female' },
+          { value: 3, label: 'I don\'t want to share that' },
+        ],
+      },
+    },
+	]
+
+	onSubmit() {
+		console.log(this.model)
+  }
+
 }

src/app/app.module.ts

@@ -1,24 +1,50 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { BrowserModule } from '@angular/platform-browser'
+import { NgModule } from '@angular/core'
 
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { ReactiveFormsModule } from '@angular/forms';
-import { FormlyModule } from '@ngx-formly/core';
-import { FormlyMaterialModule } from '@ngx-formly/material';
+import { AppRoutingModule } from './app-routing.module'
+import { AppComponent } from './app.component'
+import { ReactiveFormsModule } from '@angular/forms'
+import { FormlyModule } from '@ngx-formly/core'
+import { FormlyMaterialModule } from '@ngx-formly/material'
+import { FormlyMatDatepickerModule } from '@ngx-formly/material/datepicker';
+import { FormlyMatToggleModule } from '@ngx-formly/material/toggle';
+
+import { MatDatepickerModule } from '@angular/material/datepicker'
+import { MatDialogModule } from '@angular/material/dialog'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { MatInputModule } from '@angular/material/input'
+import { MatRadioModule } from '@angular/material/radio'
+import { MatSelectModule } from '@angular/material/select'
+import { MatButtonModule } from '@angular/material/button'
+import { MatCheckboxModule } from '@angular/material/checkbox'
+import { MatNativeDateModule } from '@angular/material/core'
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    ReactiveFormsModule,
-    FormlyModule.forRoot(),
-    FormlyMaterialModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+	declarations: [AppComponent],
+	imports: [
+		BrowserModule,
+		AppRoutingModule,
+		BrowserAnimationsModule,
+
+		ReactiveFormsModule,
+		MatCheckboxModule,
+		MatButtonModule,
+		MatDatepickerModule,
+		MatDialogModule,
+		MatFormFieldModule,
+		MatInputModule,
+		MatRadioModule,
+		MatSelectModule,
+
+		MatNativeDateModule,
+		FormlyMatDatepickerModule,
+		FormlyMatToggleModule,
+
+		FormlyModule.forRoot(),
+		FormlyMaterialModule,
+	],
+	providers: [],
+	bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/index.html

@@ -1,13 +1,15 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>AngularNgxFormlyMaterial</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+	<head>
+		<meta charset="utf-8" />
+		<title>AngularNgxFormlyMaterial</title>
+		<base href="/" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="icon" type="image/x-icon" href="favicon.ico" />
+		<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet" />
+		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+	</head>
+	<body>
+		<app-root></app-root>
+	</body>
 </html>

src/styles.scss

@@ -1 +1,8 @@
 /* You can add global styles to this file, and also import other style files */
+@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
+
+body {
+    font-family: "Roboto", Arial, Helvetica, sans-serif;
+    line-height: 1.3;
+    font-size: 1.2rem;
+}