[v4] The field name is missing only display {_field_} placeholder when using built-in rules and useField API

[andy3520]

Versions

• vee-validate: 4.0.0-alpha.8
• vue: 3.0.0-rc.6

Describe the bug
The field name is missing only display {field} placeholder when using built-in rules and useField API

To reproduce
Steps to reproduce the behavior:

1. Install vee-validate, import all the built-in rules -> it only displays 1 default message with different rules
   i.e Test is not valid with required rule, also Test is not valid with numeric rule
2. Use config API to config generateMessage with @vee-validate/i18n and en.json

import { localize } from '@vee-validate/i18n'
import en from '@vee-validate/i18n/dist/locale/en.json'
import * as rules from '@vee-validate/rules'
import { configure, defineRule } from 'vee-validate'

configure({
  generateMessage: localize({ en })
})

type ValidationRuleFunction = (
  value: any,
  params: any[] | Record<string, any>,
  ctx: FieldContext
) => boolean | string | Promise<boolean | string>

interface FieldContext {
  field: string
  value: any
  form: Record<string, any>
  rule: {
    name: string
    params?: Record<string, any> | any[]
  }
}

Object.keys(rules).forEach((rule: string) => {
  defineRule(rule, (rules as Record<string, ValidationRuleFunction>)[rule])
})

3. Message is now correct base on built-in rules but now field name is missing only display {field}
   

Expected behavior
Display field name correctly, display the built-in rules message correctly

[andy3520]

Log ctx form dictionary.reslove

[andy3520]

function interpolate(template, values) {

    return template.replace(/{([^}]+)}/g, function (_, p) {
        console.log('match:', _);
        console.log('p:', p);
        console.log('values:', values);
        console.log('p in values:', p in values);
        return p in values ? values[p] : `{${p}}`;
    });
}

Result:

match: {_field_}
p: _field_
values: {email: "", password: "asdf", field: "email"}
p in values: false