Как мы можем перевести динамическое значение

Question

В моей форме я использую это для отображения нескольких сообщений об ошибках, поэтому я не могу перевести эти сообщения с помощью переводчика

<span * ngIf="formErrors.giftCardNumber" class="invalid-feedback" >
            {{formErrors.giftCardNumber | translate }}
</span>

, поэтому здесь .giftCardNumber имеет ошибку проверки многопользовательского режима, как я могу перевести это, используяngx translate.

this.stepOneForm = this.formBuilder.group({
    giftCardNumber: new FormControl('', [
        Validators.required,
        Validators.pattern(/^[0-9]\d*$/),
        Validators.minLength(16),
        Validators.maxLength(16)
    ])
});

метод ниже помогает мне получить сообщения об ошибках

logValidationErrors(group: FormGroup = this.stepOneForm): void {
    Object.keys(group.controls).forEach((key: string) => {

        const abstractControl = group.get(key);
        if (abstractControl instanceof FormGroup) {

            this.logValidationErrors(abstractControl);
        } else {


            this.formErrors[key] = '';

            if (abstractControl && !abstractControl.valid
                && (abstractControl.touched || abstractControl.dirty)) {

                // const messages = (this.translateService.currentLang === 'fr') ? this.validationMessagesSpn[key] : this.validationMessages[key];
                const messages = this.validationMessages[key];
                for (const errorKey in abstractControl.errors) {
                    if (errorKey) {
                        this.formErrors[key] = messages[errorKey] + ' ';
                    }
                }
            }
        }
    });
}

, и я определил

    formErrors = {
        'giftCardNumber': '',
        'pin': '',
        'zipCode': '',
        'state': '',
        'recaptchaReactive': ''
    }

    validationMessages = {
        'giftCardNumber': {
            'required': 'Gift Card Number is mandatory',
            'pattern': 'Please provide only numbers.',
            'minlength': 'Minimum length allowed 16',
            'maxlength': 'Maxlength length allowed 16'


        }
    }

В моей форме я использую этодля отображения нескольких сообщений об ошибках

< span * ngIf="formErrors.giftCardNumber" class="invalid-feedback" >
    {{formErrors.giftCardNumber | translate }}
</span>

, поэтому здесь .giftCardNumber имеет ошибку проверки многопользовательского режима, как я могу перевести это с помощью ngx translate.

this.stepOneForm = this.formBuilder.group({
    giftCardNumber: new FormControl('', [
        Validators.required,
        Validators.pattern(/^[0-9]\d*$/),
        Validators.minLength(16),
        Validators.maxLength(16)

    ])
});

метод ниже помогает мне получить сообщения об ошибках

logValidationErrors(group: FormGroup = this.stepOneForm): void {
    Object.keys(group.controls).forEach((key: string) => {

        const abstractControl = group.get(key);
        if (abstractControl instanceof FormGroup) {

            this.logValidationErrors(abstractControl);
        } else {


            this.formErrors[key] = '';

            if (abstractControl && !abstractControl.valid
                && (abstractControl.touched || abstractControl.dirty)) {

                // const messages = (this.translateService.currentLang === 'fr') ? this.validationMessagesSpn[key] : this.validationMessages[key];
                const messages = this.validationMessages[key];
                for (const errorKey in abstractControl.errors) {
                    if (errorKey) {
                        this.formErrors[key] = messages[errorKey] + ' ';
                    }
                }
            }
        }
    });
}

и я изменился

    formErrors = {
        'giftCardNumber': '',
        'pin': '',
        'zipCode': '',
        'state': '',
        'recaptchaReactive': ''
    }

    validationMessages = {
        'giftCardNumber': {
            'required': 'Gift Card Number is mandatory',
            'pattern': 'Please provide only numbers.',
            'minlength': 'Minimum length allowed 16',
            'maxlength': 'Maxlength length allowed 16'


        }
    }`

Я пытался несколькими способами const сообщения = (this.translateService.currentLang === 'fr')?this.validationMessagesSpn [ключ]: this.validationMessages [ключ];Я изменяю validationMessages на validationMessagesSpn. Я могу добиться результата путем перевода, но он не меняется мгновенно, когда мы переключаем язык, мне нужно снова ввести что-то, после чего это будет отражено.

Answer 1

Попробуйте это:

Удалите определенные вами объекты и поместите переводы в файлы en.json, например:

'gift-card-number': {
            'required': 'Gift Card Number is mandatory',
            'pattern': 'Please provide only numbers.',
            'minlength': 'Minimum length allowed 16',
            'maxlength': 'Maxlength length allowed 16'
}

тогда сделайте функцию:

getGiftCardNumberErrors() {
    return this.GiftCardNumber.hasError('required') ? this.translateService.get('girt-card-number-errors.required') :
    this.GiftCardNumber.hasError('pattern') ? this.translateService.get('girt-card-number-errors.pattern') :
    this.GiftCardNumber.hasError('minLength') ? this.translateService.get('girt-card-number-errors.minlength') : 
    this.GiftCardNumber.hasError('maxLength') ? this.translateService.get('girt-card-number-errors.maxlength') :'';
  }

И шаблон:

<div *ngIf="giftCardNumber.invalid && !''">{{getGiftCardNumerErrors()}}</div>

Answer 2

1. Вы должны зарегистрировать эти сообщения об ошибках в своих файлах i18n.Перевод NGX не работает без файлов i18n.

2. Тогда в вашем компоненте

validationMessages = {
        'giftCardNumber': {
            'required': 'error.gift_card_number_required',
            'pattern': 'error.gift_card_number_only',
            'minlength': 'error.gift_card_number_minlength',
            'maxlength': 'error.gift_card_number_maxlength'


        }
 }

Тогда в вашем i18n, например, в файле j.json.добавить эти:

{
 "error.gift_card_number_required": "blablabla",
 …
 …
}