├── .editorconfig
├── .gitignore
├── README.md
├── angular.json
├── package-lock.json
├── package.json
├── src
    ├── app
    │   ├── app-routing.module.ts
    │   ├── app.component.html
    │   ├── app.component.scss
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   ├── array-form
    │   │   ├── array-form.component.html
    │   │   ├── array-form.component.scss
    │   │   └── array-form.component.ts
    │   ├── basic-form
    │   │   ├── basic-form.component.html
    │   │   ├── basic-form.component.scss
    │   │   └── basic-form.component.ts
    │   ├── nested-form
    │   │   ├── nested-form.component.html
    │   │   ├── nested-form.component.scss
    │   │   └── nested-form.component.ts
    │   ├── submit-form
    │   │   ├── submit-form.component.html
    │   │   ├── submit-form.component.scss
    │   │   └── submit-form.component.ts
    │   └── valid-form
    │   │   ├── valid-form.component.html
    │   │   ├── valid-form.component.scss
    │   │   └── valid-form.component.ts
    ├── assets
    │   └── .gitkeep
    ├── browserslist
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── favicon.ico
    ├── index.html
    ├── karma.conf.js
    ├── main.ts
    ├── polyfills.ts
    ├── styles.scss
    ├── test.ts
    ├── tsconfig.app.json
    ├── tsconfig.spec.json
    └── tslint.json
├── tsconfig.json
└── tslint.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | 
 8 | /src/env.ts
 9 | /NOTES.md
10 | 
11 | # dependencies
12 | /node_modules
13 | /functions/node_modules
14 | 
15 | 
16 | # IDEs and editors
17 | /.idea
18 | .project
19 | .classpath
20 | .c9/
21 | *.launch
22 | .settings/
23 | *.sublime-workspace
24 | 
25 | # IDE - VSCode
26 | .vscode/*
27 | !.vscode/settings.json
28 | !.vscode/tasks.json
29 | !.vscode/launch.json
30 | !.vscode/extensions.json
31 | 
32 | # misc
33 | /.sass-cache
34 | /connect.lock
35 | /coverage
36 | /libpeerconnection.log
37 | npm-debug.log
38 | yarn-error.log
39 | testem.log
40 | /typings
41 | 
42 | # System Files
43 | .DS_Store
44 | Thumbs.db
45 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Episode 107 - Reactive Forms Basics Guide
 2 | 
 3 | Watch the [screencast](https://angularfirebase.com/lessons/)
 4 | 
 5 | 
 6 | 1. `git clone <this-repo>` 
 7 | 2. `npm install`
 8 | 3.  Add your firebase credentials to the `app.module`
 9 | 4. `ng serve`
10 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "base6": {
  7 |       "root": "",
  8 |       "sourceRoot": "src",
  9 |       "projectType": "application",
 10 |       "prefix": "app",
 11 |       "schematics": {
 12 |         "@schematics/angular:component": {
 13 |           "styleext": "scss"
 14 |         }
 15 |       },
 16 |       "architect": {
 17 |         "build": {
 18 |           "builder": "@angular-devkit/build-angular:browser",
 19 |           "options": {
 20 |             "outputPath": "dist/base6",
 21 |             "index": "src/index.html",
 22 |             "main": "src/main.ts",
 23 |             "polyfills": "src/polyfills.ts",
 24 |             "tsConfig": "src/tsconfig.app.json",
 25 |             "assets": [
 26 |               "src/favicon.ico",
 27 |               "src/assets"
 28 |             ],
 29 |             "styles": [
 30 |               {
 31 |                 "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
 32 |               },
 33 |               "src/styles.scss"
 34 |             ],
 35 |             "scripts": []
 36 |           },
 37 |           "configurations": {
 38 |             "production": {
 39 |               "fileReplacements": [
 40 |                 {
 41 |                   "replace": "src/environments/environment.ts",
 42 |                   "with": "src/environments/environment.prod.ts"
 43 |                 }
 44 |               ],
 45 |               "optimization": true,
 46 |               "outputHashing": "all",
 47 |               "sourceMap": false,
 48 |               "extractCss": true,
 49 |               "namedChunks": false,
 50 |               "aot": true,
 51 |               "extractLicenses": true,
 52 |               "vendorChunk": false,
 53 |               "buildOptimizer": true
 54 |             }
 55 |           }
 56 |         },
 57 |         "serve": {
 58 |           "builder": "@angular-devkit/build-angular:dev-server",
 59 |           "options": {
 60 |             "browserTarget": "base6:build"
 61 |           },
 62 |           "configurations": {
 63 |             "production": {
 64 |               "browserTarget": "base6:build:production"
 65 |             }
 66 |           }
 67 |         },
 68 |         "extract-i18n": {
 69 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 70 |           "options": {
 71 |             "browserTarget": "base6:build"
 72 |           }
 73 |         },
 74 |         "test": {
 75 |           "builder": "@angular-devkit/build-angular:karma",
 76 |           "options": {
 77 |             "main": "src/test.ts",
 78 |             "polyfills": "src/polyfills.ts",
 79 |             "tsConfig": "src/tsconfig.spec.json",
 80 |             "karmaConfig": "src/karma.conf.js",
 81 |             "styles": [
 82 |               {
 83 |                 "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
 84 |               },
 85 |               "styles.scss"
 86 |             ],
 87 |             "scripts": [],
 88 |             "assets": [
 89 |               "src/favicon.ico",
 90 |               "src/assets"
 91 |             ]
 92 |           }
 93 |         },
 94 |         "lint": {
 95 |           "builder": "@angular-devkit/build-angular:tslint",
 96 |           "options": {
 97 |             "tsConfig": [
 98 |               "src/tsconfig.app.json",
 99 |               "src/tsconfig.spec.json"
100 |             ],
101 |             "exclude": [
102 |               "**/node_modules/**"
103 |             ]
104 |           }
105 |         }
106 |       }
107 |     },
108 |     "base6-e2e": {
109 |       "root": "e2e/",
110 |       "projectType": "application",
111 |       "architect": {
112 |         "e2e": {
113 |           "builder": "@angular-devkit/build-angular:protractor",
114 |           "options": {
115 |             "protractorConfig": "e2e/protractor.conf.js",
116 |             "devServerTarget": "base6:serve"
117 |           }
118 |         },
119 |         "lint": {
120 |           "builder": "@angular-devkit/build-angular:tslint",
121 |           "options": {
122 |             "tsConfig": "e2e/tsconfig.e2e.json",
123 |             "exclude": [
124 |               "**/node_modules/**"
125 |             ]
126 |           }
127 |         }
128 |       }
129 |     }
130 |   },
131 |   "defaultProject": "base6"
132 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "base6",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "test": "ng test",
 9 |     "lint": "ng lint",
10 |     "e2e": "ng e2e"
11 |   },
12 |   "private": true,
13 |   "dependencies": {
14 |     "@angular/animations": "^6.0.0",
15 |     "@angular/common": "^6.0.0",
16 |     "@angular/compiler": "^6.0.0",
17 |     "@angular/core": "^6.0.0",
18 |     "@angular/forms": "^6.0.0",
19 |     "@angular/http": "^6.0.0",
20 |     "@angular/material": "^6.0.2",
21 |     "@angular/platform-browser": "^6.0.0",
22 |     "@angular/platform-browser-dynamic": "^6.0.0",
23 |     "@angular/router": "^6.0.0",
24 |     "@fortawesome/angular-fontawesome": "0.1.0-9",
25 |     "@fortawesome/fontawesome-svg-core": "^1.2.0-11",
26 |     "@fortawesome/free-brands-svg-icons": "^5.1.0-8",
27 |     "@fortawesome/free-solid-svg-icons": "^5.1.0-8",
28 |     "angularfire2": "^5.0.0-rc.9",
29 |     "core-js": "^2.5.4",
30 |     "firebase": "^5.0.3",
31 |     "rxjs": "^6.0.0",
32 |     "rxjs-compat": "^6.1.0",
33 |     "zone.js": "^0.8.26",
34 |     "@angular/cdk": "^6.0.0"
35 |   },
36 |   "devDependencies": {
37 |     "@angular/compiler-cli": "^6.0.0",
38 |     "@angular-devkit/build-angular": "~0.6.0",
39 |     "typescript": "~2.7.2",
40 |     "@angular/cli": "~6.0.0",
41 |     "@angular/language-service": "^6.0.0",
42 |     "@types/jasmine": "~2.8.6",
43 |     "@types/jasminewd2": "~2.0.3",
44 |     "@types/node": "~8.9.4",
45 |     "codelyzer": "~4.2.1",
46 |     "jasmine-core": "~2.99.1",
47 |     "jasmine-spec-reporter": "~4.2.1",
48 |     "karma": "~1.7.1",
49 |     "karma-chrome-launcher": "~2.2.0",
50 |     "karma-coverage-istanbul-reporter": "~1.4.2",
51 |     "karma-jasmine": "~1.1.1",
52 |     "karma-jasmine-html-reporter": "^0.2.2",
53 |     "protractor": "~5.3.0",
54 |     "ts-node": "~5.0.1",
55 |     "tslint": "~5.9.1"
56 |   }
57 | }


--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { Routes, RouterModule } from '@angular/router';
 3 | 
 4 | const routes: Routes = [];
 5 | 
 6 | @NgModule({
 7 |   imports: [RouterModule.forRoot(routes)],
 8 |   exports: [RouterModule]
 9 | })
10 | export class AppRoutingModule { }
11 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <main>
 2 |     <h3>Oh hello</h3>
 3 |     <p>Welcome to AngularFirebase world </p>
 4 |     <fa-icon icon="fire" size="6x" style="color: #f27236"></fa-icon><br>
 5 | 
 6 |     <h1>Basic Form</h1>
 7 | 
 8 |     <basic-form></basic-form>
 9 | 
10 |     <h1>Nested Form</h1>
11 | 
12 |     <nested-form></nested-form>
13 | 
14 |     <h1>Dynamic Forms with FormArray</h1>
15 | 
16 |     <array-form></array-form>
17 | 
18 |     <h1>Validation</h1>
19 | 
20 |     <valid-form></valid-form>
21 | 
22 |     <h1>Form Submission</h1>
23 | 
24 |     <submit-form></submit-form>
25 | 
26 | </main>
27 | 
28 | 
29 | 
30 | <router-outlet></router-outlet>


--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AngularFirebase/107-reactive-forms-basics-guide/2a7f6e1e20d5eaacc3cc805c117f0ba3e4a11e19/src/app/app.component.scss


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { AngularFirestore } from 'angularfire2/firestore'
 3 | 
 4 | @Component({
 5 |   selector: 'app-root',
 6 |   templateUrl: './app.component.html',
 7 |   styleUrls: ['./app.component.scss']
 8 | })
 9 | export class AppComponent {
10 |   constructor(private afs: AngularFirestore) { }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 4 | import { library } from '@fortawesome/fontawesome-svg-core';
 5 | import { fas } from '@fortawesome/free-solid-svg-icons';
 6 | import { fab } from '@fortawesome/free-brands-svg-icons';
 7 | library.add(fas, fab);
 8 | 
 9 | import { AppRoutingModule } from './app-routing.module';
10 | import { AppComponent } from './app.component';
11 | import { AngularFireModule } from 'angularfire2';
12 | import { AngularFirestoreModule } from 'angularfire2/firestore';
13 | import { AngularFireStorageModule } from 'angularfire2/storage';
14 | import { AngularFireAuthModule } from 'angularfire2/auth';
15 | 
16 | import { ReactiveFormsModule } from '@angular/forms';
17 | 
18 | // Add your project credentials
19 | // Then use it in the imports section below
20 | const yourFirebaseConfig = {
21 |   apiKey: '<your-key>',
22 |   authDomain: '<your-project-authdomain>',
23 |   databaseURL: '<your-database-URL>',
24 |   projectId: '<your-project-id>',
25 |   storageBucket: '<your-storage-bucket>',
26 |   messagingSenderId: '<your-messaging-sender-id>'
27 | };
28 | 
29 | // Delete Me!
30 | import { firebase } from '../env';
31 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
32 | import { MatInputModule } from '@angular/material/input';
33 | import { MatSelectModule } from '@angular/material/select';
34 | import { MatButtonModule } from '@angular/material/button';
35 | import { MatCheckboxModule } from '@angular/material/checkbox';
36 | import { MatChipsModule } from '@angular/material/chips';
37 | 
38 | 
39 | import { BasicFormComponent } from './basic-form/basic-form.component';
40 | import { NestedFormComponent } from './nested-form/nested-form.component';
41 | import { ArrayFormComponent } from './array-form/array-form.component';
42 | import { ValidFormComponent } from './valid-form/valid-form.component';
43 | import { SubmitFormComponent } from './submit-form/submit-form.component';
44 | // import { } from '@angular/material/
45 | 
46 | 
47 | 
48 | @NgModule({
49 |   declarations: [
50 |     AppComponent,
51 |     BasicFormComponent,
52 |     NestedFormComponent,
53 |     ArrayFormComponent,
54 |     ValidFormComponent,
55 |     SubmitFormComponent
56 |   ],
57 |   imports: [
58 |     BrowserModule,
59 |     AppRoutingModule,
60 |     AngularFireModule.initializeApp(firebase),
61 |     AngularFirestoreModule, 
62 |     AngularFireAuthModule, 
63 |     AngularFireStorageModule,
64 |     FontAwesomeModule,
65 |     ReactiveFormsModule,
66 |     BrowserAnimationsModule,
67 |     MatInputModule,
68 |     MatButtonModule,
69 |     MatSelectModule,
70 |     MatCheckboxModule,
71 |     MatChipsModule
72 |   ],
73 |   bootstrap: [AppComponent]
74 | })
75 | export class AppModule { }
76 | 


--------------------------------------------------------------------------------
/src/app/array-form/array-form.component.html:
--------------------------------------------------------------------------------
 1 | <form [formGroup]="myForm">
 2 | 
 3 |     Value: {{ myForm.value | json }}
 4 | 
 5 |     <hr>
 6 | 
 7 |     <mat-form-field class="full">
 8 |         <input matInput placeholder="email" formControlName="email">
 9 |     </mat-form-field>
10 | 
11 |     <div formArrayName="phones">
12 | 
13 |         <div *ngFor="let phone of phoneForms.controls; let i=index" [formGroupName]="i">
14 | 
15 | 
16 |             <mat-form-field class="xs">
17 |                 <input matInput placeholder="area" formControlName="area">
18 |             </mat-form-field>
19 | 
20 |             <mat-form-field class="xs">
21 |                 <input matInput placeholder="prefix" formControlName="prefix">
22 |             </mat-form-field>
23 | 
24 |             <mat-form-field class="sm">
25 |                 <input matInput placeholder="line" formControlName="line">
26 |             </mat-form-field>
27 | 
28 |             <button mat-raised-button color="warn" (click)="deletePhone()">Delete</button>
29 | 
30 |         </div>
31 | 
32 |     </div>
33 | 
34 |     <button mat-raised-button color="primary" (click)="addPhone()">Add Phone Number</button>
35 | 
36 | 
37 | 
38 | </form>


--------------------------------------------------------------------------------
/src/app/array-form/array-form.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AngularFirebase/107-reactive-forms-basics-guide/2a7f6e1e20d5eaacc3cc805c117f0ba3e4a11e19/src/app/array-form/array-form.component.scss


--------------------------------------------------------------------------------
/src/app/array-form/array-form.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
 3 | 
 4 | 
 5 | @Component({
 6 |   selector: 'array-form',
 7 |   templateUrl: './array-form.component.html',
 8 |   styleUrls: ['./array-form.component.scss']
 9 | })
10 | export class ArrayFormComponent implements OnInit {
11 | 
12 |   myForm: FormGroup;
13 |   
14 | 
15 |   constructor(private fb: FormBuilder) { }
16 | 
17 |   ngOnInit() {
18 |     this.myForm = this.fb.group({
19 |       email: '',
20 |       phones: this.fb.array([])
21 |     })
22 | 
23 |   }
24 | 
25 |   get phoneForms() {
26 |     return this.myForm.get('phones') as FormArray
27 |   }
28 | 
29 |   addPhone() {
30 | 
31 |     const phone = this.fb.group({ 
32 |       area: [],
33 |       prefix: [],
34 |       line: [],
35 |     })
36 | 
37 |     this.phoneForms.push(phone);
38 |   }
39 | 
40 |   deletePhone(i) {
41 |     this.phoneForms.removeAt(i)
42 |   }
43 | 
44 | }
45 | 


--------------------------------------------------------------------------------
/src/app/basic-form/basic-form.component.html:
--------------------------------------------------------------------------------
 1 | <form [formGroup]="myForm">
 2 | 
 3 |     Value: {{ myForm.value | json }}
 4 | 
 5 |     <hr>
 6 | 
 7 |     <mat-form-field>
 8 |         <input matInput placeholder="email" formControlName="email">
 9 |     </mat-form-field>
10 | 
11 |     <mat-form-field>
12 |         <textarea matInput placeholder="your message..." formControlName="message"></textarea>
13 |     </mat-form-field>
14 | 
15 |     <mat-form-field>
16 |         <mat-select formControlName="career" placeholder="career">
17 |             <mat-option value="Magician">Magician</mat-option>
18 |             <mat-option value="Clown">Clown</mat-option>
19 |             <mat-option value="Juggler">Juggler</mat-option>
20 |         </mat-select>
21 |     </mat-form-field>
22 | 
23 | </form>


--------------------------------------------------------------------------------
/src/app/basic-form/basic-form.component.scss:
--------------------------------------------------------------------------------
1 | mat-form-field {
2 |     display: block;
3 | }
4 | 
5 | textarea {
6 |     min-height: 130px;
7 | }


--------------------------------------------------------------------------------
/src/app/basic-form/basic-form.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { FormBuilder, FormGroup } from '@angular/forms';
 3 | 
 4 | @Component({
 5 |   selector: 'basic-form',
 6 |   templateUrl: './basic-form.component.html',
 7 |   styleUrls: ['./basic-form.component.scss']
 8 | })
 9 | export class BasicFormComponent implements OnInit {
10 | 
11 |   myForm: FormGroup;
12 | 
13 |   constructor(private fb: FormBuilder) { }
14 | 
15 |   ngOnInit() {
16 |     this.myForm = this.fb.group({
17 |       email: '',
18 |       message: '',
19 |       career: ''
20 |     })
21 | 
22 |     this.myForm.valueChanges.subscribe(console.log)
23 |   }
24 | 
25 | }
26 | 


--------------------------------------------------------------------------------
/src/app/nested-form/nested-form.component.html:
--------------------------------------------------------------------------------
 1 | <form [formGroup]="myForm">
 2 | 
 3 |     Value: {{ myForm.value | json }}
 4 | 
 5 |     <hr>
 6 | 
 7 |     <mat-form-field class="full">
 8 |         <input matInput placeholder="email" formControlName="email">
 9 |     </mat-form-field>
10 | 
11 |     <h4>Cell Phone</h4>
12 | 
13 |     <div formGroupName="cellPhone">
14 | 
15 |         <mat-form-field class="xs">
16 |             <input matInput placeholder="area" formControlName="area">
17 |         </mat-form-field>
18 | 
19 |         <mat-form-field class="xs">
20 |             <input matInput placeholder="prefix" formControlName="prefix">
21 |         </mat-form-field>
22 | 
23 |         <mat-form-field class="sm">
24 |             <input matInput placeholder="line" formControlName="line">
25 |         </mat-form-field>
26 | 
27 |     </div>
28 | 
29 |     <h4>Home Phone</h4>
30 | 
31 |     <div formGroupName="homePhone">
32 | 
33 |         <mat-form-field class="xs">
34 |             <input matInput placeholder="area" formControlName="area">
35 |         </mat-form-field>
36 | 
37 |         <mat-form-field class="xs">
38 |             <input matInput placeholder="prefix" formControlName="prefix">
39 |         </mat-form-field>
40 | 
41 |         <mat-form-field class="sm">
42 |             <input matInput placeholder="line" formControlName="line">
43 |         </mat-form-field>
44 | 
45 |     </div>
46 | 
47 | 
48 | </form>


--------------------------------------------------------------------------------
/src/app/nested-form/nested-form.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AngularFirebase/107-reactive-forms-basics-guide/2a7f6e1e20d5eaacc3cc805c117f0ba3e4a11e19/src/app/nested-form/nested-form.component.scss


--------------------------------------------------------------------------------
/src/app/nested-form/nested-form.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { FormBuilder, FormGroup } from '@angular/forms';
 3 | 
 4 | @Component({
 5 |   selector: 'nested-form',
 6 |   templateUrl: './nested-form.component.html',
 7 |   styleUrls: ['./nested-form.component.scss']
 8 | })
 9 | export class NestedFormComponent implements OnInit {
10 | 
11 |   myForm: FormGroup;
12 | 
13 |   constructor(private fb: FormBuilder) { }
14 | 
15 |   ngOnInit() {
16 | 
17 |     const phone = this.fb.group({ 
18 |       area: [],
19 |       prefix: [],
20 |       line: [],
21 |     })
22 | 
23 |     this.myForm = this.fb.group({
24 |       email: '',
25 |       homePhone: phone,
26 |       cellPhone: phone,
27 |     })
28 | 
29 |   }
30 | 
31 | 
32 | }
33 | 


--------------------------------------------------------------------------------
/src/app/submit-form/submit-form.component.html:
--------------------------------------------------------------------------------
 1 | <form [formGroup]="myForm" [hidden]="success" (ngSubmit)="submitHandler()">
 2 |     <hr>
 3 | 
 4 |     <mat-form-field>
 5 |         <input matInput placeholder="email" formControlName="email">
 6 |     </mat-form-field>
 7 | 
 8 |     <mat-form-field>
 9 |         <textarea matInput placeholder="your message..." formControlName="message"></textarea>
10 |     </mat-form-field>
11 | 
12 | 
13 |     <button mat-button color="primary" type="submit" [disabled]="myForm.invalid">Submit Form</button>
14 | 
15 | </form>
16 | 
17 | <div *ngIf="success" class="notification is-success">
18 |     Yay! We received your submission
19 | </div>


--------------------------------------------------------------------------------
/src/app/submit-form/submit-form.component.scss:
--------------------------------------------------------------------------------
1 | mat-form-field {
2 |     display: block;
3 | }
4 | 
5 | textarea {
6 |     min-height: 130px;
7 | }


--------------------------------------------------------------------------------
/src/app/submit-form/submit-form.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 3 | import { AngularFirestore } from 'angularfire2/firestore';
 4 | import { tap, first } from 'rxjs/operators';
 5 | 
 6 | @Component({
 7 |   selector: 'submit-form',
 8 |   templateUrl: './submit-form.component.html',
 9 |   styleUrls: ['./submit-form.component.scss']
10 | })
11 | export class SubmitFormComponent implements OnInit {
12 | 
13 |   myForm: FormGroup;
14 | 
15 |   // Form state
16 |   loading = false;
17 |   success = false;
18 | 
19 |   constructor(private fb: FormBuilder, private afs: AngularFirestore) { }
20 | 
21 |   ngOnInit() {
22 |     this.myForm = this.fb.group({
23 |       email: ['', Validators.required],
24 |       message: ['', Validators.required]
25 |     })
26 | 
27 |     this.preloadData()
28 |   }
29 | 
30 | 
31 |   async submitHandler() {
32 |     this.loading = true;
33 | 
34 |     const formValue = this.myForm.value;
35 | 
36 |     try {
37 |       await this.afs.collection('contacts').add(formValue);
38 |       this.success = true;
39 |     } catch(err) {
40 |       console.error(err)
41 |     }
42 | 
43 |     this.loading = false;
44 |   }
45 | 
46 |   preloadData() {
47 |     this.afs.doc('contacts/Kjn0JWBKdOnUlBwuE93S').valueChanges().pipe(
48 |       tap(data => {
49 |         this.myForm.patchValue(data)
50 |       })
51 |     )
52 |     .subscribe()
53 |   }
54 | 
55 | }
56 | 


--------------------------------------------------------------------------------
/src/app/valid-form/valid-form.component.html:
--------------------------------------------------------------------------------
 1 | <form [formGroup]="myForm">
 2 | 
 3 |     Value: {{ myForm.value | json }}
 4 |     <ul>
 5 |         <li>Valid:
 6 |             <mat-chip selected="true" [color]="myForm.valid ? 'accent' : 'warn'">{{ myForm.valid }}</mat-chip>
 7 |         </li>
 8 |         <li>Invalid:
 9 |             <mat-chip selected="true" [color]="myForm.invalid ? 'accent' : 'warn'">{{ myForm.invalid }}</mat-chip>
10 |         </li>
11 |         <li>Dirty:
12 |             <mat-chip selected="true" [color]="myForm.dirty ? 'accent' : 'warn'">{{ myForm.dirty }}</mat-chip>
13 |         </li>
14 |         <li>Pristine:
15 |             <mat-chip selected="true" [color]="myForm.pristine ? 'accent' : 'warn'">{{ myForm.pristine }}</mat-chip>
16 |         </li>
17 |         <li>Touched:
18 |             <mat-chip selected="true" [color]="myForm.touched ? 'accent' : 'warn'">{{ myForm.touched }}</mat-chip>
19 |         </li>
20 |         <li>Untouched:
21 |             <mat-chip selected="true" [color]="myForm.untouched ? 'accent' : 'warn'">{{ myForm.untouched }}</mat-chip>
22 |         </li>
23 |         <li>Pending:
24 |             <mat-chip selected="true" [color]="myForm.pending ? 'accent' : 'warn'">{{ myForm.pending }}</mat-chip>
25 |         </li>
26 |     </ul>
27 | 
28 |     <hr>
29 | 
30 |     <mat-form-field>
31 |         <input matInput placeholder="email" formControlName="email" autocomplete="off">
32 | 
33 |         <mat-error *ngIf="email.invalid && email.touched" class="has-text-danger">
34 |             Your email does not look right
35 |         </mat-error>
36 |     </mat-form-field>
37 | 
38 | 
39 | 
40 |     <mat-form-field>
41 |         <input matInput type="password" placeholder="password" formControlName="password" autocomplete="new-password">
42 | 
43 |         <mat-hint align="end">Must have one letter, and one number</mat-hint>
44 |         <mat-error *ngIf="password.invalid && password.touched" class="has-text-danger">
45 |             That password sucks...
46 |         </mat-error>
47 | 
48 |     </mat-form-field>
49 | 
50 | 
51 | 
52 |     <mat-form-field>
53 |         <input matInput placeholder="age" [value]="0" formControlName="age">
54 | 
55 |         <mat-error *ngIf="age.errors?.min && age.touched">
56 |             {{ age.errors.min.actual }} is young to use this app kiddo!
57 |         </mat-error>
58 | 
59 |         <mat-error *ngIf="age.errors?.max && age.touched">
60 |             {{ age.errors.max.actual }} is too you old to use this app gramps!
61 |         </mat-error>
62 | 
63 |     </mat-form-field>
64 | 
65 | 
66 | 
67 |     <mat-checkbox formControlName="agree" color="primary">Are you sure?</mat-checkbox>
68 | 
69 |     <hr>
70 | 
71 |     <button mat-raised-button [disabled]="myForm.invalid || loading" color="primary">Let's Do it!</button>
72 | 
73 | 
74 | 
75 | 
76 | </form>


--------------------------------------------------------------------------------
/src/app/valid-form/valid-form.component.scss:
--------------------------------------------------------------------------------
 1 | mat-form-field {
 2 |     display: block;
 3 | }
 4 | 
 5 | .mat-accent {
 6 |     background-color: #42A948 !important;
 7 | }
 8 | 
 9 | .ng-valid[required],
10 | .ng-valid.required {
11 |     border-bottom: 5px solid #42A948;
12 | }
13 | 
14 | ul {
15 |     text-align: left;
16 | }
17 | 
18 | .ng-valid .mat-form-field-underline {
19 |     background-color: green;
20 | }


--------------------------------------------------------------------------------
/src/app/valid-form/valid-form.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 3 | 
 4 | @Component({
 5 |   selector: 'valid-form',
 6 |   templateUrl: './valid-form.component.html',
 7 |   styleUrls: ['./valid-form.component.scss']
 8 | })
 9 | export class ValidFormComponent implements OnInit {
10 |   myForm: FormGroup;
11 | 
12 |   constructor(private fb: FormBuilder) {}
13 | 
14 |   ngOnInit() {
15 |     const phone = this.fb.group({
16 |       area: [],
17 |       prefix: [],
18 |       line: []
19 |     });
20 | 
21 |     this.myForm = this.fb.group({
22 |       email: ['', [
23 |         Validators.required,
24 |         Validators.email
25 |       ]],
26 |       password: ['', [
27 |         Validators.required,
28 |         Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$')
29 |       ]],
30 |       age: [null, [
31 |         Validators.required,
32 |         Validators.minLength(2), 
33 |         Validators.min(18), 
34 |         Validators.max(65)
35 |       ]],
36 |       agree: [false, [
37 |         Validators.requiredTrue
38 |       ]]
39 |     });
40 |   }
41 | 
42 |   get email() {
43 |     return this.myForm.get('email');
44 |   }
45 | 
46 |   get password() {
47 |     return this.myForm.get('password');
48 |   }
49 | 
50 |   get age() {
51 |     return this.myForm.get('age');
52 |   }
53 | 
54 |   get agree() {
55 |     return this.myForm.get('agree');
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AngularFirebase/107-reactive-forms-basics-guide/2a7f6e1e20d5eaacc3cc805c117f0ba3e4a11e19/src/assets/.gitkeep


--------------------------------------------------------------------------------
/src/browserslist:
--------------------------------------------------------------------------------
1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed
5 | > 0.5%
6 | last 2 versions
7 | Firefox ESR
8 | not dead
9 | # IE 9-11


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * In development mode, to ignore zone related error stack frames such as
11 |  * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
12 |  * import the following file, but please comment it out in production mode
13 |  * because it will have performance impact when throw error
14 |  */
15 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
16 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AngularFirebase/107-reactive-forms-basics-guide/2a7f6e1e20d5eaacc3cc805c117f0ba3e4a11e19/src/favicon.ico


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 | <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 5 | <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
 6 |   <meta charset="utf-8">
 7 |   <title>Base6</title>
 8 |   <base href="/">
 9 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" />
10 |   <meta name="viewport" content="width=device-width, initial-scale=1">
11 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
12 |   <link rel="stylesheet" href="https://use.typekit.net/jnq3uxd.css">
13 | 
14 | </head>
15 | <body>
16 |   <div class="content">
17 |       <app-root></app-root>
18 |   </div>
19 | 
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../coverage'),
20 |       reports: ['html', 'lcovonly'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false
30 |   });
31 | };


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.log(err));
13 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 | 
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
39 | 
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | // import 'core-js/es6/reflect';
42 | 
43 | 
44 | /** Evergreen browsers require these. **/
45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
46 | import 'core-js/es7/reflect';
47 | 
48 | 
49 | /**
50 |  * Web Animations `@angular/platform-browser/animations`
51 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
52 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
53 |  **/
54 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
55 | 
56 | /**
57 |  * By default, zone.js will patch all possible macroTask and DomEvents
58 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
59 |  */
60 | 
61 |  // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
62 |  // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
63 |  // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
64 | 
65 |  /*
66 |  * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
67 |  * with the following flag, it will bypass `zone.js` patch for IE/Edge
68 |  */
69 | // (window as any).__Zone_enable_cross_context_check = true;
70 | 
71 | /***************************************************************************************************
72 |  * Zone JS is required by default for Angular itself.
73 |  */
74 | import 'zone.js/dist/zone';  // Included with Angular CLI.
75 | 
76 | 
77 | 
78 | /***************************************************************************************************
79 |  * APPLICATION IMPORTS
80 |  */
81 | 


--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
 1 | /* You can add global styles to this file, and also import other style files */
 2 | 
 3 | .content {
 4 |     text-align: center;
 5 |     padding: 10vh 15vw;
 6 | }
 7 | 
 8 | body {
 9 |     font-family: "sofia-pro", sans-serif;
10 | }
11 | 
12 | h1,
13 | h2,
14 | h3 {
15 |     font-weight: bold;
16 | }
17 | 
18 | body {
19 |     margin: 0;
20 | }
21 | 
22 | .full {
23 |     display: block;
24 | }
25 | 
26 | .xs {
27 |     margin-right: 15px;
28 |     width: 15%;
29 | }
30 | 
31 | .sm {
32 |     width: 25%;
33 | }
34 | body { margin: 0; }
35 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "module": "es2015",
 6 |     "types": []
 7 |   },
 8 |   "exclude": [
 9 |     "src/test.ts",
10 |     "**/*.spec.ts"
11 |   ]
12 | }
13 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "module": "commonjs",
 6 |     "types": [
 7 |       "jasmine",
 8 |       "node"
 9 |     ]
10 |   },
11 |   "files": [
12 |     "test.ts",
13 |     "polyfills.ts"
14 |   ],
15 |   "include": [
16 |     "**/*.spec.ts",
17 |     "**/*.d.ts"
18 |   ]
19 | }
20 | 


--------------------------------------------------------------------------------
/src/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "../tslint.json",
 3 |     "rules": {
 4 |         "directive-selector": [
 5 |             true,
 6 |             "attribute",
 7 |             "",
 8 |             "camelCase"
 9 |         ],
10 |         "component-selector": [
11 |             true,
12 |             "element",
13 |             "",
14 |             "kebab-case"
15 |         ]
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "moduleResolution": "node",
 9 |     "emitDecoratorMetadata": true,
10 |     "experimentalDecorators": true,
11 |     "target": "es5",
12 |     "typeRoots": [
13 |       "node_modules/@types"
14 |     ],
15 |     "lib": [
16 |       "es2017",
17 |       "dom"
18 |     ]
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "node_modules/codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "arrow-return-shorthand": true,
  7 |     "callable-types": true,
  8 |     "class-name": true,
  9 |     "comment-format": [
 10 |       true,
 11 |       "check-space"
 12 |     ],
 13 |     "curly": true,
 14 |     "deprecation": {
 15 |       "severity": "warn"
 16 |     },
 17 |     "eofline": true,
 18 |     "forin": true,
 19 |     "import-blacklist": [
 20 |       true,
 21 |       "rxjs/Rx"
 22 |     ],
 23 |     "interface-over-type-literal": true,
 24 |     "label-position": true,
 25 |     "max-line-length": [
 26 |       true,
 27 |       140
 28 |     ],
 29 |     "member-access": false,
 30 |     "member-ordering": [
 31 |       true,
 32 |       {
 33 |         "order": [
 34 |           "static-field",
 35 |           "instance-field",
 36 |           "static-method",
 37 |           "instance-method"
 38 |         ]
 39 |       }
 40 |     ],
 41 |     "no-arg": true,
 42 |     "no-bitwise": true,
 43 |     "no-console": [
 44 |       true,
 45 |       "debug",
 46 |       "info",
 47 |       "time",
 48 |       "timeEnd",
 49 |       "trace"
 50 |     ],
 51 |     "no-construct": true,
 52 |     "no-debugger": true,
 53 |     "no-duplicate-super": true,
 54 |     "no-empty": false,
 55 |     "no-empty-interface": true,
 56 |     "no-eval": true,
 57 |     "no-inferrable-types": [
 58 |       true,
 59 |       "ignore-params"
 60 |     ],
 61 |     "no-misused-new": true,
 62 |     "no-non-null-assertion": true,
 63 |     "no-shadowed-variable": true,
 64 |     "no-string-literal": false,
 65 |     "no-string-throw": true,
 66 |     "no-switch-case-fall-through": true,
 67 |     "no-trailing-whitespace": false,
 68 |     "no-unnecessary-initializer": true,
 69 |     "no-unused-expression": true,
 70 |     "no-use-before-declare": true,
 71 |     "no-var-keyword": true,
 72 |     "object-literal-sort-keys": false,
 73 |     "one-line": [
 74 |       true,
 75 |       "check-open-brace",
 76 |       "check-catch",
 77 |       "check-else",
 78 |       "check-whitespace"
 79 |     ],
 80 |     "prefer-const": true,
 81 |     "quotemark": [
 82 |       true,
 83 |       "single"
 84 |     ],
 85 |     "radix": true,
 86 |     "triple-equals": [
 87 |       true,
 88 |       "allow-null-check"
 89 |     ],
 90 |     "typedef-whitespace": [
 91 |       true,
 92 |       {
 93 |         "call-signature": "nospace",
 94 |         "index-signature": "nospace",
 95 |         "parameter": "nospace",
 96 |         "property-declaration": "nospace",
 97 |         "variable-declaration": "nospace"
 98 |       }
 99 |     ],
100 |     "unified-signatures": true,
101 |     "variable-name": false,
102 |     "no-output-on-prefix": true,
103 |     "use-input-property-decorator": true,
104 |     "use-output-property-decorator": true,
105 |     "use-host-property-decorator": true,
106 |     "no-input-rename": true,
107 |     "no-output-rename": true,
108 |     "use-life-cycle-interface": true,
109 |     "use-pipe-transform-interface": true,
110 |     "component-class-suffix": true,
111 |     "directive-class-suffix": true
112 |   }
113 | }
114 | 


--------------------------------------------------------------------------------