Question

在我的表单中，该代码用于显示多条错误消息，因此无法在翻译器的帮助下翻译此消息

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

所以这里.giftCardNumber出现多重验证错误，我该如何使用ngx转换来翻译它。

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转换来翻译它。

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 [key]：this.validationMessages [key]; 在将validationMessages更改为validationMessagesSpn时，我可以通过翻译来实现输出，但是当我们切换语言时，它并不会立即更改，我需要再次输入一些内容，这样才能体现出来。

Answer 1

您必须在i18n文件中注册这些错误消息。没有i18n文件，NGX转换将无法正常工作。
然后在您的组件中

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中，例如en.json。添加这些：

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

Answer 2

尝试一下：

删除定义的对象，并将翻译内容放入文件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>

我们如何转换动态价值

2 个答案: