Vee Validate 2.x not identifying nested vid with Laravel application

30 views Asked by At

I'm using Vee Validate 2.x in my Nuxt JS 2.x project. I have a form and have mapped the vid prop to be nested, e.g: "account.first_name". In my Laravel project I'm mapping the request since some pages don't pass the "account" part. Laravel appears to think I haven't set the fields though, what am I missing?

Controller

$fields = collect(array_merge(collect($request->input('account', []))->toArray(), [
    'origin_source' => UserOriginSource::INVITE->value,
    'origin_campaign' => (string) Str::of('onboarding')->trim(),
    'timezone' => in_array($request->input('timezone', 'UTC'), timezone_identifiers_list())
        ? $request->input('timezone', 'UTC')
        : 'Europe/London'
]))->toArray();

$mapped = collect($fields)->mapWithKeys(function ($field, $key) {
    return [(string) Str::of(Str::of('account.')->append($key))->trim() => $field];
})->toArray();

This calls Fortify's create method: $user = (new CreateNewUser)->create($mapped, 'account');

/**
 * Validate and create a newly registered user.
 *
 * @param  array<string, string>  $input
 */
public function create(array $input, string $bag = ''): User
{
    $rules = [
        'first_name' => ['required', 'string', 'min:2', 'max:128'],
        'last_name' => ['nullable', 'min:2', 'max:128'],
        'timezone' => ['required', 'timezone'],
        'email' => [
            'required',
            'string',
            'email',
            'max:255',
            'indisposable',
            Rule::unique(User::class),
        ],
        'origin_source' => [
            'required',
            'string',
            'in:'.implode(',', array_column(UserOriginSource::cases(), 'value')),
        ],
        'origin_source_other' => ['required_if:origin_source,other', 'max:128'],
        'origin_campaign' => [
            'nullable',
            'string',
        ],
        'password' => $this->passwordRules(),
    ];

    Validator::make($input, collect($rules)->mapWithKeys(function ($rule, $key) use ($bag) {
        if ($bag == '') return [$key => $rule];
        return [(string) Str::of(Str::of($bag)->append('.')->append($key))->trim() => $rule];
    })->toArray())->validate();

    $customer = [
        'first_name' => $input['first_name'],
        'last_name' => $input['last_name'] ?? null,
        'email' => $input['email'],
        'timezone' => $input['timezone'] ?? 'UTC',
        'password' => Hash::make($input['password']),
        'origin_source' => $input['origin_source'] ?? 'other',
        'origin_source_other' => $input['origin_source_other'],
        'origin_campaign' => $input['origin_campaign'],
    ];

    return User::create($customer);
}

Example front-end input:

<ValidationProvider
  name="Company name"
  vid="company.company_name"
  rules="required|min:2"
  v-slot="{ errors, classes }"
>
  <b-form-group id="company-name-input-group">
    <label for="company-name" class="d-flex align-items-center font-weight-bold">
      <svg v-b-tooltip.hover title="Please tell us your company name" xmlns="http://www.w3.org/2000/svg" class="mr-gap" width="20" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
      </svg>
      Company name
    </label>
    <b-form-input
      id="company-name"
      v-model="form.company.company_name"
      type="text"
      placeholder="e.g: My company name"
      :class="classes"
      aria-describedby="company-name-live-feedback"
    ></b-form-input>
    <b-form-invalid-feedback id="company-name-live-feedback">
      {{ errors[0] }}
    </b-form-invalid-feedback>
    <b-form-text>
      This can be changed later
    </b-form-text>
  </b-form-group>
</ValidationProvider>
0

There are 0 answers