Угловой 2 формы реализации рамок проверки не работает

Question

Я пытаюсь реализовать шаблон проверки формы на основе от этой статьи: https://coryrylan.com/blog/angular-form-builder-and-validation-management

Валидации сам работают отлично, но компонент для отображения сообщений проверки никогда не сработали. Он создается, когда конструктор попадает, но «this.control» (который ссылается на входное значение, предоставленное компоненту) не определено.

Это код для самого компонента

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; 
    } 
} 

.. код для службы проверки ..

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 }; 
     } 
    } 
} 

и, наконец, тест форма компонент и шаблон ..

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 
     } 
    } 
} 

---

<form [formGroup]="testForm" (submit)="save()"> 
    <div formGroupName="setup"> 
    <label for="keyIdentifier">Key ID:</label> 
    <input type="text" formControlName="keyIdentifier" id="keyIdentifier" /> 
    <form-control-messages [control]="testForm.controls.setup.controls.keyIdentifier"></form-control-messages> 

    <label for="keyType">Key ID:</label> 
    <input type="text" formControlName="keyType" id="keyType" /> 
    <form-control-messages [control]="testForm.controls.setup.controls.keyType"></form-control-messages> 
    </div> 
    <div formGroupName="contactInformation"> 
    <label for="name">Name:</label> 
    <input type="text" formControlName="name" id="name" /> 
    <form-control-messages [control]="testForm.controls.contactInformation.controls.name"></form-control-messages> 

    <label for="email">Email:</label> 
    <input type="email" formControlName="email" id="email" /> 
    <form-control-messages [control]="testForm.controls.contactInformation.controls.email"></form-control-messages> 

    <label for="postalCode">Postal Code:</label> 
    <input type="text" formControlName="postalCode" id="postalCode" /> 
    <form-control-messages [control]="testForm.controls.contactInformation.controls.postalCode"></form-control-messages> 
    </div> 

    <button type="submit">Save</button> 
</form> 

Я отправил все это вверх на http://plnkr.co/edit/rxvBLr5XtTdEUy5nGtAG

Я был бы признателен за любой вклад в то, что я здесь отсутствует.

Заранее благодарен!

Answer 1

Я выяснил, что это опечатка с множеством ссылок errorMessage (s) в шаблоне для компонента. Увидев это утром, я наконец увидел его.

Спасибо всем, кто посмотрел!