How to translate form errors with angular i18n? - forms

Question

I am working on i18n for angular and I would like to provide a translation for form errors. But I do not know how to do that. I followed the guide from angular website. And I tried to use the select method but it is not working.
Initially, before trying to translate, I had the following code in my component.ts:
onValueChanged(data?: any) {
if (!this.userForm) { return; }
const form = this.userForm;
for (const field in this.formErrors) {
// clear previous error message (if any)
this.formErrors[field] = '';
const control = form.get(field);
if (control && control.dirty && !control.valid) {
const messages = this.validationMessages[field];
for (const key in control.errors) {
this.formErrors[field] += messages[key] + ' ';
}
}
}
}
formErrors = {
'firstname': ''
};
validationMessages = {
'firstname': {
'required': 'Firstname is required.',
'pattern': 'Only alphabetics caracters are allowed.'
}
};
And the following code in my component.html:
<div *ngIf="formErrors.firstname" class="form-control-feedback alert">
{{ formErrors.firstname }}
</div>
It worked perfectly because there was no translation. Then, I made the following updates:
In the component.ts:
validationMessages = {
'firstname': {
'required': 'required',
'pattern': 'pattern'
}
};
In the component.html:
<div *ngIf="formErrors.firstname" class="form-control-feedback alert">
<ng-container i18n="##userModalFirstnameError">
{formErrors.firstname, select, required {required} pattern {pattern}}
</ng-container>
</div>
In the messages.fr.xlf file, I have this:
<trans-unit id="userModalFirstnameError" datatype="html">
<source>{VAR_SELECT, select, required {required} pattern {pattern} }</source>
<target>
{VAR_SELECT, select, required {Nom utilisateur obligatoire} pattern {pattern}}
</target>
...
</trans-unit>
Unfortunately, this solution does not work.

Answer 1

I finally found where the issue comes from. Actually, there were 2 mistakes.
The first one is related to the 'VAR_SELECT' in the .xlf file. It has been generated by Angular with the build command => "ng-xi18n --i18nFormat=xlf". This 'VAR_SELECT' works well if a "direct" variable is used (for example if I put "{toto, select, required {required} pattern {pattern}}" and toto was equal to "required"). But it seems that it does not work if a variable from table is used (which is my case with the variable "formErrors.firstname"). So I replaced 'VAR_SELECT' in the .xlf file by the name of my variable 'formErrors.firstname'.
The second one is in the "onValueChanged" function:
for (const key in control.errors) {
this.formErrors[field] += messages[key] + ' ';
}
Because of the space character at the end, the variable did not match one of the values defined (for example, it was 'required ' where I was expected 'required'. Note the additional space at the end of the 1st value)