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>