Curriculum: Validators + Sync Validators

Author: toddmotto

43-validators-object/.editorconfig

@@ -0,0 +1,20 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

43-validators-object/.gitignore

@@ -0,0 +1,27 @@
+# Project
+.idea
+
+# Node
+node_modules
+
+# macOS
+.DS_Store
+.AppleDouble
+.LSOverride
+Icon
+._*
+.Spotlight-V100
+.Trashes
+
+## Windows
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+$RECYCLE.BIN/
+
+# Package Managers
+yarn-error.log
+npm-debug.log
+
+# Cache
+.awcache

43-validators-object/README.md

@@ -0,0 +1,82 @@
+<a href="https://ultimateangular.com" target="_blank"><img src="https://toddmotto.com/img/ua.png"></a>
+
+# Angular Fundamentals Seed
+
+> This is the seed project for the [Angular Fundamentals](https://ultimateangular.com/courses/#angular-2) course by [Todd Motto](https://twitter.com/toddmotto).
+
+## Project Setup and Tooling
+
+### Tools
+
+This course is recorded with the following tools, you can optionally follow along using the same, or your favourite text editor/IDE and browser.
+
+*Text editor*: Visual Studio Code, you can [download it here](http://code.visualstudio.com) for both Mac, Windows and Linux.
+*Browser*: Google Chrome, you can [download it here](https://www.google.com/chrome)
+
+### Prerequisites
+
+Please make sure that you have the following installed:
+
+* Install the _latest version_ of [Node.js](http://nodejs.org) (Mac or Windows)
+  * Mac users can optionally `brew install node` if they have [brew](http://brew.sh) installed
+
+* Node Sass, you _may_ need it if you haven't already got it installed:
+
+```bash
+npm install -g node-sass
+```
+
+### Project Install
+
+To grab the seed project, either Fork this repo or [click here to download](https://github.com/UltimateAngular/angular-fundamentals-seed/archive/master.zip) the `.zip` folder and extract the files wherever you like on your machine.
+
+#### Step 1: Package Manager
+
+To install the project dependencies, you will need to install `yarn`. To install `yarn`, run the following in your terminal:
+
+```bash
+npm install -g yarn
+```
+
+Mac users can alternatively use `brew` to install `yarn`.
+
+```bash
+brew update
+brew install yarn
+```
+
+If you experience any issues when installing/using `yarn` you can checkout the installation instructions [here](https://yarnpkg.com/en/docs/install).
+
+##### Step 2: Project Dependencies
+
+Now that we have a package manager, we can install the project dependencies. You can do this by running:
+
+```bash
+yarn install
+```
+
+This will install our dependencies for running our Angular application.
+
+#### Step 3: Running the project
+
+During development, the project is built using `webpack-dev-server`. This provides a local development server as well as having webpack recompile our app when a file changes. The project will also automatically refresh the page whenever we make changes.
+
+To start the project in development, run:
+
+```
+yarn start
+```
+
+This will output some information about the project (such as the TypeScript version and build progress). Once you see "build completed", you are ready to code!
+
+Open your browser to [localhost:4000](http://localhost:4000) to start running the code.
+
+### Project Tooling
+
+The project uses `webpack` to build and compile all of our assets. This will do the following for us: 
+
+- Compile all our TypeScript code into JavaScript (starting from `main.ts` and branching outwards from imported files)
+- Bundle all our JavaScript into one file to use
+- Allow us to use SASS for our component's CSS files
+- Provide the polyfills needed to run our app in all modern browsers
+- Mock a JSON backend using [json-server](https://github.com/typicode/json-server)

43-validators-object/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+@Component({
+  selector: 'app-root',
+  template: `
+    <div>
+      <stock-inventory></stock-inventory>
+    </div>
+  `
+})
+export class AppComponent {}

43-validators-object/app/app.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { StockInventoryModule } from './stock-inventory/stock-inventory.module';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    StockInventoryModule
+  ],
+  bootstrap: [
+    AppComponent
+  ]
+})
+export class AppModule {}

43-validators-object/app/stock-inventory/components/stock-branch/stock-branch.component.scss

@@ -0,0 +1,17 @@
+:host {
+  border-bottom: 1px solid #ccc;
+  margin: 0 0 20px;
+  padding: 0 0 20px;
+  display: block;
+}
+.error {
+  background: #B52D30;
+  color: #fff;
+  font-weight: 500;
+  font-size: 12px;
+  text-transform: uppercase;
+  border-radius: 0 0 3px 3px;
+  line-height: 1;
+  padding: 6px 10px;
+  margin-top: -1px;
+}

43-validators-object/app/stock-inventory/components/stock-branch/stock-branch.component.ts

@@ -0,0 +1,42 @@
+import { Component, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'stock-branch',
+  styleUrls: ['stock-branch.component.scss'],
+  template: `
+    <div [formGroup]="parent">
+      <div formGroupName="store">
+        <input 
+          type="text" 
+          placeholder="Branch ID"
+          formControlName="branch">
+        <div
+          class="error" 
+          *ngIf="required('branch')">
+          Branch ID is required
+        </div>
+        <input 
+          type="text" 
+          placeholder="Manager Code"
+          formControlName="code">
+        <div
+          class="error" 
+          *ngIf="required('code')">
+          Manager ID is required
+        </div>
+      </div>
+    </div>
+  `
+})
+export class StockBranchComponent {
+  @Input()
+  parent: FormGroup;
+
+  required(name: string) {
+    return (
+      this.parent.get(`store.${name}`).hasError('required') && 
+      this.parent.get(`store.${name}`).touched
+    );
+  }
+}

43-validators-object/app/stock-inventory/components/stock-counter/stock-counter.component.scss

@@ -0,0 +1,38 @@
+.stock-counter {
+  &.focused {
+    box-shadow: 0 1px 1px rgba(0,0,0,.3);
+  }
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 3px;
+  overflow: hidden;
+  & > div > div {
+    display: flex;
+    align-items: center;
+
+    & > div {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  p {
+    font-size: 16px;
+    font-weight: 400;
+    text-align: center;
+    width: 50px;
+  }
+
+  button {
+    padding: 3px;
+    border-radius: 0;
+    line-height: 1;
+    padding: 3px 7px;
+    background: #9E61C8;
+    color: #fff;
+    font-weight: 500;
+    &:disabled {
+      background: rgba(0, 0, 0, 0.1);
+      color: rgba(0, 0, 0, 0.4);
+    }
+  }
+}

43-validators-object/app/stock-inventory/components/stock-counter/stock-counter.component.ts

@@ -0,0 +1,111 @@
+import { Component, Input, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+const COUNTER_CONTROL_ACCESSOR = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => StockCounterComponent),
+  multi: true
+};
+
+@Component({
+  selector: 'stock-counter',
+  providers: [COUNTER_CONTROL_ACCESSOR],
+  styleUrls: ['stock-counter.component.scss'],
+  template: `
+    <div 
+      class="stock-counter"
+      [class.focused]="focus">
+      <div>
+        <div 
+         tabindex="0"
+         (keydown)="onKeyDown($event)"
+         (blur)="onBlur($event)"
+         (focus)="onFocus($event)">
+          <p>{{ value }}</p>
+          <div>
+            <button 
+              type="button"
+              (click)="increment()"
+              [disabled]="value === max">
+              +
+            </button>
+            <button 
+              type="button"
+              (click)="decrement()"
+              [disabled]="value === min">
+              -
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+})
+export class StockCounterComponent implements ControlValueAccessor {
+
+  private onTouch: Function;
+  private onModelChange: Function;
+
+  registerOnTouched(fn) {
+    this.onTouch = fn;
+  }
+  
+  registerOnChange(fn) {
+    this.onModelChange = fn;
+  }
+  
+  writeValue(value) {
+    this.value = value || 0;
+  }
+
+  @Input() step: number = 10;
+  @Input() min: number = 10;
+  @Input() max: number = 1000;
+
+  value: number = 10;
+
+  focus: boolean;
+
+  onKeyDown(event: KeyboardEvent) {
+
+    const handlers = {
+      ArrowDown: () => this.decrement(),
+      ArrowUp: () => this.increment()
+    };
+
+    if (handlers[event.code]) {
+      handlers[event.code]();
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    this.onTouch();
+  }
+
+  onBlur(event: FocusEvent) {
+    this.focus = false;
+    event.preventDefault();
+    event.stopPropagation();
+    this.onTouch();
+  }
+  onFocus(event: FocusEvent) {
+    this.focus = true;
+    event.preventDefault();
+    event.stopPropagation();
+    this.onTouch();
+  }
+
+  increment() {
+    if (this.value < this.max) {
+      this.value = this.value + this.step;
+      this.onModelChange(this.value);
+    }
+    this.onTouch();
+  }
+  decrement() {
+    if (this.value > this.min) {
+      this.value = this.value - this.step;
+      this.onModelChange(this.value);
+    }
+    this.onTouch();
+  }
+}