Angular 2 Form Validation Framework Umsetzung nicht funktioniert

Question

Ich versuche, ein Formular-Validierung Muster aus diesem Artikel basierten umzusetzen: https://coryrylan.com/blog/angular-form-builder-and-validation-management

Die Validierung selbst funktioniert prima, aber die Komponente die Validierungsmeldungen angezeigt werden nie ausgelöst wird. Es wird instanziiert, wenn der Konstruktor getroffen wird, aber "this.control" (das den für die Komponente bereitgestellten Eingabewert referenziert) ist nicht definiert.

Dies ist der Code für das jeweilige Bauteil

import { Component, Input } from '@angular/core'; 
import { FormGroup, FormControl } from '@angular/forms'; 
import { FormValidationService } from "./validation/formValidation.service"; 

@Component({ 
    selector: 'form-control-messages', 
    template: `<div *ngIf="errorMessage !== null">{{errorMessage}}</div>` 
}) 
export class FormControlMessagesComponent { 
    @Input() control: FormControl; 

    constructor(){ } 

    get errorMessages() { 
     for (let propertyName in this.control.errors) { 
      if(this.control.errors.hasOwnProperty(propertyName) && this.control.touched){ 
       return FormValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]); 
      } 
     } 
     return null; 
    } 
} 

.. der Code für den Validierungsdienst ..

export class FormValidationService { 
    static getValidatorErrorMessage(validatorName: string, validatorValue?: any) { 
     let messages = { 
      'required': 'This field is required.', 
      'invalidEmailAddress': 'This is not a valid email address.', 
      'minlength': `This must contain at least ${validatorValue.requiredLength} characters.`, 
      'invalidStateCode': 'This is not a valid state.', 
      'invalidPostalCode': 'This is not a valid postal code.', 
     }; 

     return messages[validatorName]; 
    } 

    // implementing a couple basic validations, again these can be segmented as needed 
    static emailValidtor(control){ 
     // RFC 2822 compliant regex 
     if (control.value.match(/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/)) { 
      return null; 
     } 
     else { 
      return { 'invalidEmailAddress': true }; 
     } 
    } 

    static stateCodeValidator(control){ 
     let validCodes = ['AK','AL','AR','AZ','CA','CO','CT','DC','DE','FL','GA','GU','HI','IA','ID', 'IL','IN','KS','KY','LA','MA','MD','ME','MH','MI','MN','MO','MS','MT','NC','ND','NE','NH','NJ','NM','NV','NY', 'OH','OK','OR','PA','PR','PW','RI','SC','SD','TN','TX','UT','VA','VI','VT','WA','WI','WV','WY']; 
     return (validCodes.indexOf(control.value) !== -1) ? null : { 'invalidStateCode' : true }; 
    } 

    static postalCodeValidator(control){ 
     console.log('validating postal code'); 
     // note this will only match US five- and nine-digit codes 
     if(control.value.match(/^[0-9]{5}(?:-[0-9]{4})?$/)) { 
      return null; 
     } 
     else { 
      return { 'invalidPostalCode': true }; 
     } 
    } 
} 

und schließlich die Testform Komponente und Vorlage ..

import { Component } from '@angular/core'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 
import { FormValidationService } from '../shared/validation/formValidation.service'; 

@Component({ 
    selector: 'test-form', 
    templateUrl: 'testForm.component.html' 
}) 
export class TestFormComponent { 
    testForm: FormGroup; 

    constructor(private fb: FormBuilder) { 
     this.testForm = this.fb.group({ 
      setup: this.fb.group({ 
       keyIdentifier: ['', [Validators.required, Validators.minLength(6)]], 
       keyType: [''], 
      }), 
      contactInformation: this.fb.group({ 
       name: ['', Validators.required], 
       emailAddress: ['', [Validators.required, FormValidationService.emailValidator]], 
       postalCode: ['', [Validators.required, FormValidationService.postalCodeValidator]] 
      }) 
     }); 
    } 

    save(){ 
     if(this.testForm.dirty && this.testForm.valid) { 
     // DO STUFF 
     } 
    } 
} 

---

Ich habe das alles ausgehängt an http://plnkr.co/edit/rxvBLr5XtTdEUy5nGtAG

ich jede Eingabe schätzen würde in das, was ich hier fehlt.

Vielen Dank im Voraus!

Answer 1

Ich habe es herausgefunden, entpuppte sich als ein Tippfehler mit der Vielzahl der errorMessage (s) -Referenz in der Vorlage für die Komponente. Nachdem ich heute Morgen frisch aussah, sah ich es endlich.

Vielen Dank für jeden, der es gesehen hat!