feat: add target field placeholder

[davestewart]

🔎 Overview

This PR adds functionality to show any related target field names using {_target_} or for multiple targets {_fooTarget_}, {_barTarget_}, ...

  test('fills target field placeholder', async () => {
    const names = { foo: 'Foo', bar: 'Bar', baz: 'Baz' };
    const values = { foo: 10, bar: 20 };
    const rules = 'confirmed:foo';
    const options = {
      name: names.bar,
      values,
      names
    };
    const result = await validate(values.bar, rules, options);
    expect(result.errors[0]).toEqual('Bar must match Foo');
  });

See tests in:

• https://github.com/davestewart/vee-validate/blob/feature/add-target-placeholder/tests/validate.spec.js#L25-L55

✔ Issues affected

closes #2290

[codecov]

Codecov Report

Merging #2363 into master will increase coverage by 0.04%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #2363      +/-   ##
==========================================
+ Coverage   95.19%   95.24%   +0.04%     
==========================================
  Files          44       44              
  Lines        1041     1051      +10     
  Branches      154      155       +1     
==========================================
+ Hits          991     1001      +10     
  Misses         50       50

Impacted Files	Coverage Δ
src/validate.ts	96.49% <100%> (+0.33%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f535616...8c21df3. Read the comment docs.

[davestewart]

I can update this PR to support multiple isTarget parameters if needed:

Code:

function _getTargetName(
  field: FieldContext,
  ruleSchema: ValidationRuleSchema,
  ruleName: string
): Record<string, string> {
  if (ruleSchema.params) {
    const hasMultiple = ruleSchema.params.filter(param => (param as RuleParamConfig).isTarget).length > 1;
    const names: Record<string, string> = {};
    for (let index = 0; index < ruleSchema.params.length; index++) {
      const param: RuleParamConfig = ruleSchema.params[index] as RuleParamConfig;
      if (param.isTarget) {
        const key = field.rules[ruleName][index];
        const name = field.names[key] || key;
        if (hasMultiple) {
          names[`_${param.name}Target_`] = name;
        } else {
          names._target_ = name;
        }
      }
    }
    return names;
  }
  return {};
}

Test:

  test('works for multiple targets', async () => {
    extend('sum_of', {
      message: '{_field_} must be the sum of {_aTarget_} and {_bTarget_}',
      params: [
        { name: 'a', isTarget: true },
        { name: 'b', isTarget: true }
      ],
      validate: (value, { a, b }) => value === parseInt(a, 10) + parseInt(b, 10)
    });

    const values = { foo: 10, bar: 10, baz: 10 };
    const names = { foo: 'Foo', bar: 'Bar', baz: 'Baz' };
    const rules = 'sum_of:bar,baz';
    const options = {
      name: names.foo,
      values,
      names
    };

    const result = await validate(values.foo, rules, options);
    expect(result.errors[0]).toEqual('Foo must be the sum of Bar and Baz');
  });

Let me know if you want this pushed as well.

[logaretm]

That would be great as well, will merge when you push it. Thank you!

[davestewart]

OK, pushed!

[davestewart]

Nice one!

Any idea when these changes will be available on NPM?

[logaretm]

Just tagged 3.0.7 😀

[davestewart]

Very much appreciated - big push for an initial release at work this week, and validation is one of the last items to tick off!

Thank you :)