Получите угловые ошибки на другом языке

Question

Если я проверю форму Angular Reactive, как это

this.formGroup = this._formBuilder.group({
  formControl: new FormControl(null, [Validators.required])
});

Таким образом, вход требуется.

Затем, если я пытаюсь отправить с пустым вводом, я получаю ошибки, подобные этой:

const { errors } = this.formGroup.get('formControl');
console.log(errors);

Я получаю следующий вывод

{required: true}

Мой вопрос

Могу ли я получить эту ошибку на другом языке?

Например, могу ли я установить его на французский и получить вывод?

{obligatoires: vrai}

Почему

Я пробую подход к автоматической генерации сообщений об ошибках от ошибок проверки.

Я рисую в этом StackBlitz и хотел бы знать, смогу ли я заставить это работать

https://stackblitz.com/edit/angular-validation-errors

Answer 1

Ты не можешь

Правильный способ добиться этого - сохранить вывод Angular и перевести его в пользовательский интерфейс, используя, например, ngx-translate:

Вы получили что-то вроде этого:

<div>{{ 'required' | translate }}</div>

Answer 2

Вы можете написать свои собственные валидаторы, как предложено в комментарии. Вы даже можете посмотреть исходный код для валидаторов и просто изменить их в соответствии со своими потребностями. Вот настроенный required валидатор:

function isEmptyInputValue(value: any): boolean {
  return value == null || value.length === 0;
}

class ValidatorHelper {
 static required(control: AbstractControl): ValidationErrors | null {
    return isEmptyInputValue(control.value) ? { 'obligatoires' : 'vrai' } : null;
  }
}

Тогда используйте это в своей форме как:

selectFormControl: new FormControl(null, [ValidatorHelper.required])

ДЕМО: StackBlitz

PS. Здесь мы теперь предполагаем, что у вас есть только один язык, если у вас есть несколько, это не лучшее решение.

Answer 3

Вы можете создать пользовательский компонент, такой как <custom-error> вместо <mat-error> где вы можете использовать ng2-translate или ngx-translate для перевода сообщений об ошибках. Это то, что мы делаем в нашем приложении.

Answer 4

Некоторое время назад столкнулся с такой же проблемой. Мы разработали библиотеку для решения этой проблемы.

https://github.com/RiskChallenger/translation-validation