docs(cb-form-validation): add template2 - a step between template and reactive

Raises questions about what really separates Forms from ReactiveForms

Author: wardbell

public/docs/_examples/cb-form-validation/e2e-spec.ts

@@ -1,4 +1,5 @@
 /// <reference path="../_protractor/e2e.d.ts" />
+'use strict'; // necessary for node!
 describeIf(browser.appIsTs || browser.appIsJs, 'Forms Tests', function () {
 
   beforeEach(function () {

public/docs/_examples/cb-form-validation/ts/app/app.component.ts

@@ -3,8 +3,10 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'my-app',
-  template: `<hero-form-template></hero-form-template>
+  template: `<hero-form-template1></hero-form-template1>
              <hr>
-             <hero-form-reactive></hero-form-reactive>`
+             <hero-form-template2></hero-form-template2>
+             <hr>
+             <hero-form-reactive3></hero-form-reactive3>`
 })
 export class AppComponent { }

public/docs/_examples/cb-form-validation/ts/app/reactive/hero-form-reactive.component.html

@@ -1,45 +1,47 @@
  <!-- #docregion -->
 <div class="container">
   <div [hidden]="submitted">
-    <h1>Hero Form (Reactive)</h1>
-    <form [formGroup]="heroForm" *ngIf="active" (ngSubmit)="onSubmit()">
+    <h1>Hero Form 3 (Reactive)</h1>
+    <!-- #docregion form-tag-->
+    <form [formGroup]="heroForm"  *ngIf="active"  (ngSubmit)="onSubmit()">
+    <!-- #enddocregion form-tag-->
       <div class="form-group">
         <!-- #docregion name-with-error-msg -->
         <label for="name">Name</label>
+
         <input type="text" id="name" class="form-control"
-               formControlName="name"
-               [ngClass]="{'required': isRequired('name')}">
-        <div *ngIf="formError.name" class="alert alert-danger">
-          {{ formError.name }}
+               formControlName="name" required >
+
+        <div *ngIf="formErrors.name" class="alert alert-danger">
+          {{ formErrors.name }}
         </div>
         <!-- #enddocregion name-with-error-msg -->
       </div>
 
       <div class="form-group">
         <label for="alterEgo">Alter Ego</label>
         <input type="text" id="alterEgo" class="form-control"
-            formControlName="alterEgo"
-            [ngClass]="{'required': isRequired('alterEgo')}" >
+            formControlName="alterEgo"  >
       </div>
 
       <div class="form-group">
         <label for="power">Hero Power</label>
         <select id="power" class="form-control"
-            formControlName="power"
-            [ngClass]="{'required': isRequired('power')}" >
+            formControlName="power" required >
           <option *ngFor="let p of powers" [value]="p">{{p}}</option>
         </select>
-        <div *ngIf="formError.power" class="alert alert-danger">
-          {{ formError.power }}
+
+        <div *ngIf="formErrors.power" class="alert alert-danger">
+          {{ formErrors.power }}
         </div>
       </div>
 
       <button type="submit" class="btn btn-default"
              [disabled]="!heroForm.valid">Submit</button>
       <button type="button" class="btn btn-default"
-             (click)="newHero()">New Hero</button>
+             (click)="addHero()">New Hero</button>
     </form>
   </div>
 
-  <hero-submitted [hero]="model" [(submitted)]="submitted"></hero-submitted>
+  <hero-submitted [hero]="hero" [(submitted)]="submitted"></hero-submitted>
 </div>

public/docs/_examples/cb-form-validation/ts/app/reactive/hero-form-reactive.component.ts

@@ -4,104 +4,112 @@
 import { Component, OnInit }                  from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
-import { Hero } from '../shared/hero';
+import { Hero }                   from '../shared/hero';
+import { forbiddenNameValidator } from '../shared/forbidden-name.directive';
 
 @Component({
   moduleId:  module.id,
-  selector: 'hero-form-reactive',
+  selector: 'hero-form-reactive3',
   templateUrl: 'hero-form-reactive.component.html'
 })
-// #docregion class
 export class HeroFormReactiveComponent implements OnInit {
 
   powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
 
-  model = new Hero(18, 'Dr. WhatIsHisWayTooLongName', this.powers[0], 'Dr. What');
+  hero = new Hero(18, 'Dr. WhatIsHisName', this.powers[0], 'Dr. What');
 
   submitted = false;
 
+  // #docregion on-submit
   onSubmit() {
     this.submitted = true;
-    this.model = this.heroForm.value;
+    this.hero = this.heroForm.value;
   }
-// #enddocregion class
+  // #enddocregion on-submit
+// #enddocregion
 
   // Reset the form with a new hero AND restore 'pristine' class state
   // by toggling 'active' flag which causes the form
   // to be removed/re-added in a tick via NgIf
   // TODO: Workaround until NgForm has a reset method (#6822)
-  // #docregion new-hero
   active = true;
-
-// #docregion class
-  newHero() {
-    this.model = new Hero(42, '', '');
+// #docregion
+  // #docregion add-hero
+  addHero() {
+    this.hero = new Hero(42, '', '');
     this.buildForm();
-    this.onValueChanged('');
+    this.onValueChanged();
+  // #enddocregion add-hero
 // #enddocregion class
 
     this.active = false;
     setTimeout(() => this.active = true, 0);
-// #docregion class
+// #docregion
+  // #docregion add-hero
   }
+  // #enddocregion add-hero
 
-  //// New with Reactive Form
-
+  // #docregion form-builder
   heroForm: FormGroup;
-  constructor(private builder: FormBuilder) { }
-
-  ngOnInit(): void { this.buildForm();  }
+  constructor(private fb: FormBuilder) { }
 
-  formError = {
-    'name': '',
-    'power': ''
-  };
-
-  validationMessages = {
-    'name': {
-      'required':  'Name is required.',
-      'minlength': 'Name must be at least 4 characters long.',
-      'maxlength': 'Name cannot be more than 24 characters long.'
-    },
-    'power': {
-      'required': 'Power is required.'
-    }
-  };
+  ngOnInit(): void {
+    this.buildForm();
+  }
 
   buildForm(): void {
-    this.heroForm = this.builder.group({
-      'name': [this.model.name, [
+    this.heroForm = this.fb.group({
+      // #docregion name-validators
+      'name': [this.hero.name, [
           Validators.required,
           Validators.minLength(4),
-          Validators.maxLength(24)
+          Validators.maxLength(24),
+          forbiddenNameValidator(/bob/i)
         ]
       ],
-      'alterEgo': [this.model.alterEgo],
-      'power':    [this.model.power, Validators.required]
+      // #enddocregion name-validators
+      'alterEgo': [this.hero.alterEgo],
+      'power':    [this.hero.power, Validators.required]
     });
+
     this.heroForm.valueChanges
       .subscribe(data => this.onValueChanged(data));
   }
 
-  onValueChanged(data: any) {
+  // #enddocregion form-builder
+
+  onValueChanged(data?: any) {
     const controls = this.heroForm ? this.heroForm.controls : {};
-    for (const field in this.formError) {
+
+    for (const field in this.formErrors) {
       // clear previous error message (if any)
-      this.formError[field] = '';
+      this.formErrors[field] = '';
       const control = controls[field];
+
       if (control && control.dirty && !control.valid) {
         const messages = this.validationMessages[field];
         for (const key in control.errors) {
-          this.formError[field] += messages[key] + ' ';
+          this.formErrors[field] += messages[key] + ' ';
         }
       }
     }
   }
 
-  isRequired(controlName: string): boolean {
-    const msgs = this.validationMessages[controlName];
-    return msgs && msgs['required'];
-  }
+  formErrors = {
+    'name': '',
+    'power': ''
+  };
+
+  validationMessages = {
+    'name': {
+      'required':      'Name is required.',
+      'minlength':     'Name must be at least 4 characters long.',
+      'maxlength':     'Name cannot be more than 24 characters long.',
+      'forbiddenName': 'Someone named "Bob" cannot be a hero.'
+    },
+    'power': {
+      'required': 'Power is required.'
+    }
+  };
 }
-// #enddocregion class
 // #enddocregion

public/docs/_examples/cb-form-validation/ts/app/reactive/hero-form-reactive.module.ts

@@ -2,7 +2,7 @@
 import { NgModule }            from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { SharedModule } from '../shared/shared.module';
+import { SharedModule }              from '../shared/shared.module';
 import { HeroFormReactiveComponent } from './hero-form-reactive.component';
 
 @NgModule({

public/docs/_examples/cb-form-validation/ts/app/shared/forbidden-name.directive.ts

@@ -0,0 +1,43 @@
+// #docregion
+import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, Validators } from '@angular/forms';
+
+// #docregion custom-validator
+/** A hero's name can't match the given regular expression */
+export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
+  return (control: AbstractControl): {[key: string]: any} => {
+    const name = control.value;
+    const no = nameRe.test(name);
+    return no ? {'forbiddenName': {name}} : null;
+  };
+}
+// #enddocregion custom-validator
+
+// #docregion directive
+@Directive({
+  selector: '[forbiddenName]',
+  // #docregion directive-providers
+  providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
+  // #enddocregion directive-providers
+})
+export class ForbiddenValidatorDirective implements Validator, OnChanges {
+  @Input() forbiddenName: string;
+  private valFn = Validators.nullValidator;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const change = changes['forbiddenName'];
+    if (change) {
+      const val: string | RegExp = change.currentValue;
+      const re = val instanceof RegExp ? val : new RegExp(val, 'i');
+      this.valFn = forbiddenNameValidator(re);
+    } else {
+      this.valFn = Validators.nullValidator;
+    }
+  }
+
+  validate(control: AbstractControl): {[key: string]: any} {
+    return this.valFn(control);
+  }
+}
+// #docregion directive
+

public/docs/_examples/cb-form-validation/ts/app/shared/shared.module.ts

@@ -1,12 +1,14 @@
 // #docregion
-import { NgModule }            from '@angular/core';
-import { CommonModule }        from '@angular/common';
+import { NgModule }     from '@angular/core';
+import { CommonModule } from '@angular/common';
 
-import { SubmittedComponent } from './submitted.component';
+import { ForbiddenValidatorDirective } from './forbidden-name.directive';
+import { SubmittedComponent }          from './submitted.component';
 
 @NgModule({
   imports:      [ CommonModule],
-  declarations: [ SubmittedComponent ],
-  exports:      [ CommonModule, SubmittedComponent ]
+  declarations: [ ForbiddenValidatorDirective, SubmittedComponent ],
+  exports:      [ ForbiddenValidatorDirective, SubmittedComponent,
+                  CommonModule ]
 })
 export class SharedModule { }

public/docs/_examples/cb-form-validation/ts/app/template/hero-form-template.module.ts

@@ -2,12 +2,13 @@
 import { NgModule }     from '@angular/core';
 import { FormsModule }  from '@angular/forms';
 
-import { SharedModule } from '../shared/shared.module';
-import { HeroFormTemplateComponent } from './hero-form-template.component';
+import { SharedModule }               from '../shared/shared.module';
+import { HeroFormTemplate1Component } from './hero-form-template1.component';
+import { HeroFormTemplate2Component } from './hero-form-template2.component';
 
 @NgModule({
   imports:      [ SharedModule, FormsModule ],
-  declarations: [ HeroFormTemplateComponent ],
-  exports:      [ HeroFormTemplateComponent ]
+  declarations: [ HeroFormTemplate1Component, HeroFormTemplate2Component ],
+  exports:      [ HeroFormTemplate1Component, HeroFormTemplate2Component ]
 })
 export class HeroFormTemplateModule { }