title: Angular 2 - Reactive form Validation messages
body: <h2>My objective is to put all my validation messages in component instead of html file </h2>
  
  <p>I have a sign up page and below is the fields: <br></p>
  
  <pre><code>public buildRegisterForm() {
  this.userForm = this.fb.group({
    firstName: ['', [Validators.required, Validators.minLength(3)]],
    lastName: ['', [Validators.required, Validators.maxLength(50)]],
    emailGroup: this.fb.group({
      email: ['', [Validators.required, Validators.pattern(this.emailPattern)]],
      retypeEmail: ['', Validators.required],
    }, { validator: formMatcherValidator('email', 'retypeEmail') }),
    passwordGroup: this.fb.group({
      password: ['', [Validators.required, strongPasswordValidator()]],
      retypePassword: ['', Validators.required],
    }, { validator: formMatcherValidator('password', 'retypePassword')}),
  });
  }
  </code></pre>
  
  <p>I'm following this tutorial <a href="https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#reactive" rel="noreferrer">link</a> to achieve what I want which is
  to put all my validation messages in component file instead of html file.
  <br></p>
  
  <pre><code>export const validationMessages = {
  'firstName': {
  'required': 'Your first name is required.',
  'minlength': 'Your first name must be at least 3 characters long.'
  },
  'lastName': {
  'required': 'Your last name is required.',
  'minlength': 'Your last name must be less than 50 characters long.'
  },
  'emailGroup': {
    'email': {
        'required': 'Your email is required',
        'pattern': 'Your login email does not seem to be a valid email address.'
       },
   'retypeEmail': {
        'required': 'Your retype email is required',
        'match': 'The email provided do not match.'
     },
  },
  'passwordGroup':{
       'password': {
           'required': 'Your password is required',
           'strongPassword': 'Your password must be between 8 - 15 characters and must contain at least three of the following: upper case letter, lower case letter, number, symbol.'
       },
     'retypePassword': {
         'required': 'Your retype password is required',
          'match': 'The password provided do not match.'
    }
  }
  </code></pre>
  
  <p><br>
  onValueChanged  method<br></p>
  
  <pre><code>private onValueChanged(data?: any) {
  if (!this.userForm) { return; }
  const form = this.userForm;
  
  // tslint:disable-next-line:forin
  for (const field in this.formErrors) {
    // clear previous error message (if any)
    this.formErrors[field] = '';
    let control = form.get(field);
    // console.log("control", control.dirty);
  
    console.log("controlEmail", control);
    if (control &amp;&amp; (control.dirty || control.touched) &amp;&amp; control.invalid) {
      let messages = validationMessages[field];
      // tslint:disable-next-line:forin
      for (const key in control.errors) {
        this.formErrors[field] += messages[key] + ' ';
      }
    }
   }
  }
  </code></pre>
  
  <p>And this method is not working when I have multi formBuider Group or nested Object. Any tips for this 1?<br>
  similar to this <a href="https://stackoverflow.com/questions/42941749/how-to-validate-reactive-forms-with-nested-form-groups?rq=1">How to validate reactive forms with nested form groups?</a></p>