Tengo un formulario html donde voy generando campos desde un botón con VueJs, cuando hay datos en los campos mi controlador en Laravel guarda sin problema los datos de las N cantidad de campos que haya generado.
Ahora bien, cuando intento validar estos campos, para que no se envié ningún en blanco o con datos que no corresponden, pero nunca valida los mensajes aqui el codigo:
Formulario
<button @click="addMenu()">Add Menu</button>
<form class="form-inline " @submit.prevent="guardarComida" autocomplete="off">
<input type="hidden" name="_token" value="{!! csrf_token() !!}">
<div v-for="(field, key) in fields" :key="key" >
{{ key }}
<!-- TITULO -->
<div class="form-group">
<label class="control-label" for="first-name">Titulo <span class="required">*</span>
</label>
<div>
<input id="titulo" :name="'titulo['+key+']'" class="form-control col-md-7 col-xs-12"
v-model="field.titulo" />
<div v-if="errors && errors.titulo" class="text-danger">{{ errors.titulo[0] }}</div>
</div>
</div>
<!-- DESCRIPCION -->
<div class="form-group">
<label class="control-label" for="first-name">Descripcion <span class="required">*</span>
</label>
<div>
<input id="menu" :name="'menu['+key+']'" class="form-control col-md-7 col-xs-12"
v-model="field.menu" />
<div v-if="errors && errors.menu" class="text-danger">{{ errors.menu[0] }}</div>
</div>
</div>
<!-- FECHA -->
<div class="form-group">
<label class="control-label">Fecha
<span class="required">*</span>
</label>
<div>
<date-picker id="fecha" :name="'fecha['+key+']'" v-model="field.fecha"
:config="options" @dp-change="semana"></date-picker>
<div v-if="errors && errors.fecha" class="text-danger">{{ errors.fecha[0] }}</div>
{{ errors }}
</div>
</div>
</div> <!--END FOR -->
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<button class="btn btn-primary" type="reset">Limpiar</button>
<button type="submit" class="btn btn-success">Guardar</button>
</div>
</form>
Al inicio tengo un boton que agrega los campos con estas funciones:
menuBlueprint() {
return {
titulo: '',
menu: '',
fecha: ''
};
},
addMenu() {
const vm = this;
const menuBlueprint = vm.menuBlueprint;
vm.fields.push(menuBlueprint());
}
Hasta aquí todo bien, si lleno todos los campos los guarda correctamente en mi base de datos, pero si quiero validar en mi controlador el array de campos que le envio no hace nada, no accede a los mensajes configurados en mi controlador, aqui les dejo el controlador y el codigo que envia los datos:
public function store(Request $request)
{
$data = [ 'data' => $request->all() ];
$rules = [
'menu' => ['required', new AlphaNumericWhiteSpaces],
'fecha' => 'required|date|date_format:d-m-Y',
'titulo' => 'required'
];
$messages = [
'menu.required' => 'Ups! Debe agregar la descripcion del menu',
'fecha.required' => 'Ups! Debe agregar una fecha',
'fecha.date' => 'Ups! Tipo de fecha no valido',
'fecha.date_format' => 'Ups! Formato de fecha no valido',
'titulo.required' => 'Ups! Debe agregar un titulo de menu',
];
$validator = \Validator::make($request->all(),$rules,$messages);
if ($validator->fails()){
return response()->json(['errores'=>$validator->messages(), 'status' => 'ERROR'],422);
}
try {
foreach ($request->all() as $key => $value) {
$comidas = new Foods;
$fecha = \Carbon\Carbon::createFromFormat('d-m-Y', $value['fecha']);
$nuevaFecha = $fecha->format('Y-m-d');
$nombre_dia = $fecha->localeDayOfWeek;
$numero_dia = $fecha->dayOfWeekIso;
$comidas->titulo = $value['titulo'];
$comidas->descripcion = $value['menu'];
$comidas->nombre_dia = $nombre_dia;
$comidas->numero_dia = $numero_dia;
$comidas->fecha = $nuevaFecha;
$comidas->save();
}
return response()->json(['mensaje' => '¡Excelente! Menu agregado Correctamente', 'status' => 'OK', 'foods' => $comidas ], 200);
} catch (\Illuminate\Database\QueryException $QueryException ) {
return response()->json(['mensaje' => '¡Error! No se pudo guardar el menu', 'status' => 'SQL_ERROR', 'sql' => $QueryException->errorInfo], 422);
}
}
En mi controlador probé haciendo la validación colocando las reglas de este tipo menu.*
ya que segun la documentacion de Laravel el asterico hace la función de leer un array(o eso entendi) pero no me funciono como esperaba. Realmente el problema estaria en poder leer la respuesta del validator en la vista VuejS.
Por ultimo la funcion que envia los datos (Vuejs):
guardarComida() {
this.errors = [];
this.sqlerror = '';
this.mensajeSuccess = '';
this.fields.week = moment(this.fields.fecha, "DD/MM/YYYY").week();
axios.post('/comidas/guardar', this.fields).then((response) => {
this.success = true;
this.mensajeSuccess = response.data.mensaje;
const food = response.data.foods;
this.fields = [];
}).catch(error => {
if (error.response.status === 422) {
if(error.response.data.status == 'SQL_ERROR'){
this.sqlerror = error.response.data.mensaje;
}
this.errors = [error.response.data.errores] || {};
}
});
},
Como dije mas arriba, desde la vista no logro leer los mensajes de error que me envía el controlador cuando los campos están vacíos, de antemano muchas gracias y disculpen lo extenso del post.