[v4] how to custom error message with locale message? the {length} params pass wrong

[wayearn]

Versions

• "@vee-validate/i18n": "^4.0.0-alpha.3",
• "@vee-validate/rules": "^4.0.0-alpha.1",
• "vee-validate": "^4.0.0-alpha.11",
• "vue": "^3.0.0-0",

Describe the bug
{length} field in locale json, not replace correctly.

To reproduce
Steps to reproduce the behavior:

1. use the latest vee-validate and vue
2. Add vee-validate configure file globally
3. import into main.ts
4. Add template and rules to the *.vue file
5. Start project and error shows

Expected behavior
min, length rule display the correct custom message, like:

1. min rule:

right:
密码必须至少有6个字符

wrong:
密码必须至少有{length}个字符

2. length rule:

right:
验证码长度必须为4

wrong:
验证码长度必须为{length}

Demo link
Here's my .vue file template part:

<Field
  as="input"
  type="text"
  name="username"
  v-model="username"
  placeholder="请输入用户名"
  rules="required|email"
/>

<Field
  as="input"
  type="password"
  name="password"
  v-model="password"
  placeholder="请输入密码"
  rules="required|min:6"
/>

<Field
  as="input"
  type="text"
  name="code"
  v-model="code"
  placeholder="请输入验证码"
  rules="required|length:4"
/>

Here's my global vee-validate.ts file:

/* eslint-disable @typescript-eslint/camelcase */
import { configure, defineRule } from 'vee-validate'
import { required, email, min, length, confirmed, max, is_not } from '@vee-validate/rules'
import { localize } from '@vee-validate/i18n'
import zh from '@vee-validate/i18n/dist/locale/zh_CN.json'

// Define the rule globally
defineRule('email', email)
defineRule('min', min)
defineRule('required', required)
defineRule('length', length)
defineRule('confirmed', confirmed)
defineRule('max', max)
defineRule('is_not', is_not)

configure({
  // Generates an English message locale generator
  generateMessage: localize('zh_CN', {
    // 使用扩展运算符，扩展中文包
    messages: {
      ...zh.messages,
      // 全局定义message
      required: '请输入{field}'
    },
    // 与validation-provider中的name对应
    // key为name, value为对应的中文field名称
    names: {
      email: '邮箱',
      password: '密码',
      repassword: '确认密码',
      oldpassword: '旧密码',
      name: '昵称',
      username: '账号',
      code: '验证码',
      title: '标题',
      catalog: '分类'
    },
    // 针对不同的name，定义不同的message消息
    fields: {
      catalog: {
        is_not: '请选择{field}'
      },
      email: {
        email: '请输入正确的{field}',
        required: '请输入{field}'
      }
    }
  })
})

Desktop (please complete the following information):

• OS: MacOS
• Browser : Chrome
• Version: latest

Additional context
I change the @vee-validate/i18n/dist/locale/zh_CN.json the {_field} to {filed}, so the filed name display right.

[logaretm]

Thanks for reporting this, looks like the locale file wasn't updated to match the newest version. Fixing it now

[logaretm]

closed in #2898 and I tagged a release just now

[emprove]

@logaretm Hello! I still get the same error as TS: {length} not translated. I also tried {min}.

"@vee-validate/i18n": "^4.0.0-alpha.3",
"@vee-validate/rules": "^4.0.0-alpha.1",
"vee-validate": "^4.0.0-alpha.14",

I follow this guide https://vee-validate.logaretm.com/v4/guide/i18n.

My full code:

import { defineRule, configure } from "vee-validate";
import { required, email, min } from "@vee-validate/rules";
import { localize } from "@vee-validate/i18n";

defineRule("required", required);
defineRule("email", email);
defineRule("min", min);

configure({
  generateMessage: localize("ru", {
    messages: {
      required: "Поле {field} обязательно для заполнения",
      email: "Некорректный адрес {field}",
      min: "Минимум {length} символов",
    },
  }),
});

[logaretm]

@emprove

Did you try @vee-validate/i18n@4.0.0-alpha.7? The alpha.3 is one being broken.

[emprove]

@logaretm thanks, 4.0.0-alpha.7 working. Sorry, i did't saw any upper alpha.3. I run yarn upgrade just now and @vee-validate/i18n is still aplha.3. Maybe tags broken?

[krinteron]

import { configure, Field, ErrorMessage, defineRule } from 'vee-validate';
import { min, max } from '@vee-validate/rules';

defineRule('min', min,);
defineRule('max', max);

configure({
  generateMessage: ({ rule }) => {
    const messages = {
      min: 'Too short',
      max: 'Too long',
    }
    return messages[rule.name]
  }
})