Как перевести и перечислить все ошибки формы для пользователя

Question

У меня есть несколько форм с более чем 30 полями ввода, отсортированными по категориям на разных вкладках. Ошибки при отправке отображаются в полях формы.

Как можно отобразить все ошибки проверки в списке как с именем поля, так и с ошибкой проверки? Имя поля и сообщение об ошибке также необходимо перевести на немецкий язык.

Это код, который я пытаюсь использовать до сих пор:

 getFormValidationErrors() {
    const errors = [];
    Object.keys(this.form.controls).forEach(key => {

        const controlErrors: ValidationErrors = this.form.get(key).errors;
        if (controlErrors != null) {
            Object.keys(controlErrors).forEach(keyError => {
                errors.push({
                    'field': key,
                    'error': keyError,
                    'value': controlErrors[keyError]
                });
            });
        }
    });

    console.log(errors);

    return JSON.stringify(errors);
}

Это вывод в html:

[{"Field":"name","Error":"required","value":true},{"Field":"official_name","Error":"required","value":true},{"Field":"address_zip","Error":"notInRange","value":true},{"Field":"address_zip","Error":"required","value":true},{"Field":"address_city","Error":"required","value":true},{"Field":"tenant","Error":"required","value":true}]

Я хочу показать что-то вроде этого (но также переведено на немецкий язык):

Name: Required, Official Name: Required

Answer 1

Это похоже на проблему форматирования больше всего на свете. Почему нет:

Вместо

errors.push({
    'field': key,
    'error': keyError,
    'value': controlErrors[keyError]
});

do

if (controlErrors[keyError]) {
    errors.push({
        this.getFieldLabel(key): this.getErrorLabel(error)
    });
}

, где функции getFieldLabel и getErrorLabel отвечают за перевод / выборку. Вам может даже не понадобиться формат объекта - строка может работать для вас - не знаете, как вы справляетесь с отображением текста.