NgForm problem when inserting an input of type date, the entire form is deformed

Hello, I have the following form:

  <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>

Everything is fine until I put this field:

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

The floatLabel stops being it and everything is unconfigured, How would I have to put the input file so that the structure of the form is maintained?

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);

What I want is that in some way in the form keep the profile image of the worker that is being registered at that moment