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