title: How can we translate the dynamic value
body: <p>In my form am using this to display multiple error messages so am unable to translate this messages with the help of the translator </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;span * ngIf="formErrors.giftCardNumber" class="invalid-feedback" &gt;
              {{formErrors.giftCardNumber | translate }}
  &lt;/span&gt;
  </code></pre>
  
  <p>so here .giftCardNumber have multilpe validation error how can i translate this using ngx translate.</p>
  
  <pre class="lang-js prettyprint-override"><code>this.stepOneForm = this.formBuilder.group({
      giftCardNumber: new FormControl('', [
          Validators.required,
          Validators.pattern(/^[0-9]\d*$/),
          Validators.minLength(16),
          Validators.maxLength(16)
      ])
  });
  </code></pre>
  
  <p>below method is helping me to get the error messages</p>
  
  <pre class="lang-js prettyprint-override"><code>logValidationErrors(group: FormGroup = this.stepOneForm): void {
      Object.keys(group.controls).forEach((key: string) =&gt; {
  
          const abstractControl = group.get(key);
          if (abstractControl instanceof FormGroup) {
  
              this.logValidationErrors(abstractControl);
          } else {
  
  
              this.formErrors[key] = '';
  
              if (abstractControl &amp;&amp; !abstractControl.valid
                  &amp;&amp; (abstractControl.touched || abstractControl.dirty)) {
  
                  // const messages = (this.translateService.currentLang === 'fr') ? this.validationMessagesSpn[key] : this.validationMessages[key];
                  const messages = this.validationMessages[key];
                  for (const errorKey in abstractControl.errors) {
                      if (errorKey) {
                          this.formErrors[key] = messages[errorKey] + ' ';
                      }
                  }
              }
          }
      });
  }
  </code></pre>
  
  <p>and i have defined </p>
  
  <pre class="lang-js prettyprint-override"><code>    formErrors = {
          'giftCardNumber': '',
          'pin': '',
          'zipCode': '',
          'state': '',
          'recaptchaReactive': ''
      }
  
      validationMessages = {
          'giftCardNumber': {
              'required': 'Gift Card Number is mandatory',
              'pattern': 'Please provide only numbers.',
              'minlength': 'Minimum length allowed 16',
              'maxlength': 'Maxlength length allowed 16'
  
  
          }
      }
  </code></pre>
  
  <p>In my form am using this to display multiple error messages</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt; span * ngIf="formErrors.giftCardNumber" class="invalid-feedback" &gt;
      {{formErrors.giftCardNumber | translate }}
  &lt;/span&gt;
  </code></pre>
  
  <p>so here .giftCardNumber have multilpe validation error how can i translate this using ngx translate.</p>
  
  <pre class="lang-js prettyprint-override"><code>this.stepOneForm = this.formBuilder.group({
      giftCardNumber: new FormControl('', [
          Validators.required,
          Validators.pattern(/^[0-9]\d*$/),
          Validators.minLength(16),
          Validators.maxLength(16)
  
      ])
  });
  </code></pre>
  
  <p>below method is helping me to get the error messages</p>
  
  <pre class="lang-js prettyprint-override"><code>logValidationErrors(group: FormGroup = this.stepOneForm): void {
      Object.keys(group.controls).forEach((key: string) =&gt; {
  
          const abstractControl = group.get(key);
          if (abstractControl instanceof FormGroup) {
  
              this.logValidationErrors(abstractControl);
          } else {
  
  
              this.formErrors[key] = '';
  
              if (abstractControl &amp;&amp; !abstractControl.valid
                  &amp;&amp; (abstractControl.touched || abstractControl.dirty)) {
  
                  // const messages = (this.translateService.currentLang === 'fr') ? this.validationMessagesSpn[key] : this.validationMessages[key];
                  const messages = this.validationMessages[key];
                  for (const errorKey in abstractControl.errors) {
                      if (errorKey) {
                          this.formErrors[key] = messages[errorKey] + ' ';
                      }
                  }
              }
          }
      });
  }
  </code></pre>
  
  <p>and i have difined </p>
  
  <pre class="lang-js prettyprint-override"><code>    formErrors = {
          'giftCardNumber': '',
          'pin': '',
          'zipCode': '',
          'state': '',
          'recaptchaReactive': ''
      }
  
      validationMessages = {
          'giftCardNumber': {
              'required': 'Gift Card Number is mandatory',
              'pattern': 'Please provide only numbers.',
              'minlength': 'Minimum length allowed 16',
              'maxlength': 'Maxlength length allowed 16'
  
  
          }
      }`
  </code></pre>
  
  <p>i have tried in couple of ways 
  const messages = (this.translateService.currentLang === 'fr') ? this.validationMessagesSpn[key] : this.validationMessages[key];
  am changing the validationMessages to validationMessagesSpn i can able to achieve the out by translating but it does not change instantly as we switch the language , i need to again enter something then this will be reflected. </p>