javascript - How to pass parameters in angular-translate

Question

I have created a function that does some error checkings and will be used in different input fields. My function code is below:

errorChecks = (element, minlength) => {
   if (element.$dirty) {
      if (element.$error.required == true) {
         this.errorMessage = "REQUIRED";
         return;
      } else if (element.$viewValue.length < minlength) {
          this.errorMessage = "MINLENGTH" // MINLENGTH error with parameters here
          return;
      } else {
          this.errorMessage = null;
          return;
      } 
   }
}

I am using the angularjs translate for my error messages.

"MINLENGTH": "{{ element }} must be at least {{ value }} characters",

I wanted to dynamically change my error message by passing a parameter to the translations like so:

errorChecks(username, 5);

If I enter 1 character to the username field the error would say: username must be at least 5 characters.

Is what I am trying to do even possible?

question from:https://stackoverflow.com/questions/33958340/how-to-pass-parameters-in-angular-translate

Answer 1

It'll probably be best if you translate inside the controller for this one, unless you want to pass element and minlength to the template.

Firstly you'll need inject $translate into your controller. Then to generate your message:

this.errorMessage = $translate('MINLENGTH', { element: element, value: minlength });

This method is also outlined here.

To do this in the template (outlined here):

{{ MINLENGTH | translate : { element: element, value: minlength } }}