1

Buenas tengo el siguiente formulario :

  <form #formulario="ngForm" action="" (ngSubmit)="insertarEmpleado()" ngForm>
    <div class="example-container">

      <mat-form-field hintLabel="">
        <input matInput #input maxlength="9" placeholder="DNI" pattern="(([X-Z]{1})([-]?)(\d{7})([-]?)([A-Z]{1}))|((\d{8})([-]?)([A-Z]{1}))"
          [(ngModel)]="empleado_nuevo.dni" name="dni">
      </mat-form-field>


      <!-- [ngModel]="empleado_nuevo.nombre" -->
      <mat-form-field hintLabel="">
        <input matInput #input type="text" placeholder="Nombre" pattern="[a-zA-Z\s]+" [(ngModel)]="empleado_nuevo.nombre" name="nombre">
      </mat-form-field>

      <mat-form-field hintLabel="">
        <input matInput #input type="text" placeholder="Apellidos" pattern="[a-zA-Z\s\-]+" [(ngModel)]="empleado_nuevo.apellidos"
          name="apellidos">
      </mat-form-field>

      <mat-form-field hintLabel="">
        <input matInput #input type="text" placeholder="Departamento" pattern="[a-zA-Z\s]+" [(ngModel)]="empleado_nuevo.departamento"
          name="departamento">
      </mat-form-field>

      <mat-form-field hintLabel="">
        <input matInput #input type="number" min="0" placeholder="Sueldo" [(ngModel)]="empleado_nuevo.sueldo" name="sueldo">
      </mat-form-field>

      <mat-form-field hintLabel="">
        <input matInput #input type="date" placeholder="Fecha de nacimiento" [(ngModel)]="empleado_nuevo.fecha_nacimiento" name="fecha_nacimiento">
      </mat-form-field>

      <div style="text-align: center;border: solid" class="col-lg-12">
        <input type="file" placeholder="Imagen de perfil" name="imagen_perfil">
      </div>



      <!--======-->


      <div id="botonera">
        <button mat-raised-button color="primary" (click)="insertarEmpleado()">Enviar</button>
        <button mat-raised-button (click)="limpiarFormulario(formulario)">Limpiar</button>
      </div>




    </div>
  </form>

Todo esta bien hasta que pongo este campo:

<div style="text-align: center;border: solid" class="col-lg-12">
    <input type="file" placeholder="Imagen de perfil" name="imagen_perfil">
  </div>

Los floatLabel deja de serlo y todo se desconfigura, ¿Como tendria que poner el input file de forma que se mantenga la estructura del formulario?

BACKEND

const mongoose = require('mongoose');
const {Schema,File} = mongoose;


const empleado_schema = new Schema({
    dni:{type:String,required:true, unique:true},
    nombre:{type:String, required:true},
    apellidos:{type:String, required:true},
    departamento:{type:String, required:true},
    sueldo:{type:String, required:true},
    fecha_nacimiento:{type:Date, required:true},
    imagen_perfil:{type:File,required:true}
});


module.exports = mongoose.model('tbEmpleadosss',empleado_schema);

Lo que quiero es que de alguna forma en el formulario guarde la imagen de perfil del trabajdor que se esta registrando en ese momento

1 respuesta 1

1

Que es lo que te pasa exactamente? ¿Por que no usas matInput en el input file?

<mat-form-field hintLabel="">
    <input matInput #input type="file" placeholder="Imagen de perfil" 
     name="imagen_perfil">
</mat-form-field>

¿Para que usas class="col-lg-12"?¿quieres que cubra todo el ancho?

3
  • Buenas, mira es que tengo una duda respecto al almacenamiento de ficheros(imagenes en un principio) en mi aplicacion web, a ver en un principio queria almacenar una foto de perfil de cada trabajador, entonces pense que necesitaria un campo de tipo File dentro del shema de trabajadores. pero realmente no se como deberia almacenar la imagen, a continuacon pongo el codigo del backend. Gracias por tu atencion
    – jose angel
    Commented el 5 dic. 2018 a las 16:52
  • buenas, 1 el backend para subir el archivo, (que cada foto sea unica para cada usuario) que supongo que esta todo correcto, y 2 del html lo que te intersa es; type:file. da igual que uses material design, bootstrap... No te condiciona con mongoose, puedes poner String en vez de File, dependiendo de lo que uses en el backend para subirla. Por lo menos como yo lo hago es asi. Commented el 6 dic. 2018 a las 7:45
  • vale entendido, muchas gracias por aclararmelo. Necesitaba un poco de claridad, ya que antes de programar siempre hay que pensar
    – jose angel
    Commented el 6 dic. 2018 a las 14:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.