Core: Is it possible to translate a translateParam value?

Created on 20 Jul 2018  路  4Comments  路  Source: ngx-translate/core

I haven't seen any examples.

Imagine I have a form with some fields that are validated. All the form names and validations should be translated. My validation messages are very generic and only thing that changes is the name of the field being validated:

en.json:
"authenticate": {
"email": "Email",
"password": "Password",
"validations": {
"required" : "{{value}} is required",
}
}

I want to inject a translatable value into "authenticate.validations.required" so I don't have to create a new "Required" message and translate it for each form field (there will be many across multiple forms).

So, in this case, I'd like to do something like:
{{ 'authenticate.validations.required' | translate:{ 'value' : [insert translation here] } }}

If this is possible, could you provide an example?
If not, shall I request it as a new feature?

Thanks in advance,
JB

Most helpful comment

I also try to do the same with a dynamic required message.

Example: _The field: '{{value}}' is required, in html._
But I already have the ID of the Field in Translations. Why retype it in HTML?

Maybe there is the possibility and I can not find it (you have to search 2 times).

UPDATE:
Meanwhile, I resolved in this way:

<mat-error [translate]="'_VALIDATIONS_.REQUIRED'" [translateParams]="{ value: getLocaleString('_ID_.VALUE', null, true) }"></mat-error>

component or base.component.ts (that inherits)

public getLocaleString(key: string|string[], params?: object, instant?: boolean): Observable<string|object> | any {
        return (instant) ? this.i18n.instant(key, params) : this.i18n.get(key, params);
    }

All 4 comments

I also try to do the same with a dynamic required message.

Example: _The field: '{{value}}' is required, in html._
But I already have the ID of the Field in Translations. Why retype it in HTML?

Maybe there is the possibility and I can not find it (you have to search 2 times).

UPDATE:
Meanwhile, I resolved in this way:

<mat-error [translate]="'_VALIDATIONS_.REQUIRED'" [translateParams]="{ value: getLocaleString('_ID_.VALUE', null, true) }"></mat-error>

component or base.component.ts (that inherits)

public getLocaleString(key: string|string[], params?: object, instant?: boolean): Observable<string|object> | any {
        return (instant) ? this.i18n.instant(key, params) : this.i18n.get(key, params);
    }

@1antares1, MUCHAS GRACIAS! THANK YOU SO MUCH!
Actually an easy solution but agree there should be something more straightforward then invoking the translation multiple times

try this:

You can use the TranslatePipe again to translate the translateParam value. In your case:
{{ 'authenticate.validations.required' | translate: { 'value' : value | translate } }}

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rbaumi picture rbaumi  路  4Comments

apreg picture apreg  路  3Comments

IterationCorp picture IterationCorp  路  3Comments

pndewit picture pndewit  路  3Comments

guysan picture guysan  路  4Comments