Vee-validate: [v4] Built-in rules bug w/ i18n: The placeholder for name `{_field_}` or param like `{length}` is not replacing by context value

[andy3520]

Versions

"@vee-validate/i18n": "^4.0.0-alpha.4",
"@vee-validate/rules": "^4.0.0-alpha.2",
"vee-validate": "^4.0.0-alpha.8"
"vue": "^ v3.0.0-rc.9",

Describe the bug
Built-in rules bug w/ i18n: The placeholder for name {_field_} or param like {length} is not replacing by real value. Both <Field/> and useField have this bug

To reproduce
Steps to reproduce the behavior:

1. Config i18n w/ en local
2. Import all available rule
3. Apply rule for useField or <Field/> component

Expected behavior
The placeholder for name {_field_} or param like {length} is will be replaced by context value.

Demo link
Netlify Demo or Repo

Code sandbox couldn't run it 😭 so pls clone the repo
CodeSandbox
CodeSandbox Issue Logged

Relate: #2871

[logaretm]

I have tagged a new @vee-validate/i18n version as v4 uses {field} for placeholders and not {_field_}.

Can you confirm if it works?

[andy3520]

Thank you @logaretm the field name is fixed but the params placeholder still there after bump version
https://xenodochial-lamarr-93bf8d.netlify.app/

[andy3520]

@logaretm As test this method is return interpolate(message, { ...form, _field_: fieldName }) the second params is not contain the param value of the rule (for example it not contain { length: "3" }) so the interpolcate function not replacing it

And confirmed rule is not working

public format(locale: string, ctx: FieldContext) {
    let message!: ValidationMessageTemplate;
    const { field, rule, form } = ctx;

    // find if specific message for that field was specified.
    message = this.container[locale]?.fields?.[field]?.[rule.name] || this.container[locale]?.messages?.[rule.name];
    if (!message) {
      message = `${field} is not valid`;
    }

    const fieldName = this.container[locale]?.names?.[field] ?? field;

    return isCallable(message) ? message(ctx) : interpolate(message, { ...form, _field_: fieldName });
  }

[logaretm]

The new i18n has a current limitation that it cannot interpolate params, will re-open this, and think of a way to do it without affecting the core lib.

[andy3520]

@logaretm do we have any workaround or other way to use built-in rules with message?

[logaretm]

I can't think of any at the moment, I would recommend using yup for validation or a third party localization/rules libraries for vee-validate 4 as built-in rules are being less emphasized

[andy3520]

Thank you, hope you could have a solution soon, really love your library 😅

[logaretm]

UPDATE: I have drafted a PR #2880 that resolves this, currently I'm testing edge cases to verify if it would be merged or not. A new release of @vee-validate/i18n will be tagged immediately when merged.