How to pass parameters in angular translate

Question

I created a function that performs some error checking 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 angularjs conversion for error messages.

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

I wanted to dynamically change my error message by passing a parameter like this:

 errorChecks(username, 5); 

If I enter 1 character in the username field, the error will say: username must be at least 5 characters .

Am I trying to do what I'm trying to do?

Answer 1

You are probably best off minlength this inside the controller if you don't want to pass element and minlength to the template.

First, you need to enter $translate in your controller. Then to generate your message:

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

This method is also described here .

To do this in a template (outlined here ):

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

Answer 2

You can also do this in a template as follows.

 <span data-translate="MINLENGTH" data-translate-values="{ element: element, value: minlength }"></span> 

Answer 3

You can also use $translate.instant('MINLENGTH', { element: element, value: minlength })

Answer 4

For anyone interested in syntax, to use input extraction methods for translation, this worked for me:

  {{ MINLENGTH | translate : { x: table.getShownCount(), y: table.getTotalCount() } }}