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

chris31389 picture chris31389  路  3Comments

apreg picture apreg  路  3Comments

briancullinan picture briancullinan  路  3Comments

guysan picture guysan  路  4Comments

bjornharvold picture bjornharvold  路  3Comments