1

Tengo los siguientes input y botones, los cuales son ocho ya que están hechos con un ngFor

 <div class="subir" *ngFor="let x of y">
 <input class="form" name={{x}} ngModel type="file" id="formFile">
 <button class="boton" type="button" onclick = "funcion()">boton</button>

Lo que quiero es que cuando el input file esté vacío, cambie el color del background del input file

function funcion(){
if($('.form').val() == '')
    {
           $('.form').css('background-color' , '#FF0000');
        }
    else{
           $('.form').css('background-color' , 'white');
    }
}

Mis problemas son, en primer lugar, que la función sólo se aplica con el primer input. Si todos los input tienen un archivo cargado pero el primero está vacío, la función evalúa como si estuviera vacío y cambia el color. Además, se cambia el color de todos los input file en vez de solo el que se evalúa.

1
  • Importante: no uses Jquery con Angular.
    – Lobos
    el 22 jun. 2022 a las 0:47

1 respuesta 1

0

A tu pregunta ¿Cómo cambiar el color del input file vacío si están dentro de un ngFor?

Propongo dos soluciones una ocultando el Input

Tenes alguna dificultad adicional por la cual mi respuesta no te es de utilidad?

1.Esta solucion la podes ver desplegada en

input-file Mi repo con el código en git repo

El problema con este tipo de entrada de archivo simple es que, por defecto, es muy difícil de diseñar. ¡Algunos estilos aplicados no se pueden cambiar se complica aun mas al usar un *ngFor con el cual poder manejar los estilos en forma individual de cada item por eso uso los recursos propios de Angular

Por eso aplico la teoria dada en Angular University Donde se muestra la forma de ocultar del usuario al input file y luego crear una interfaz de usuario para cargar al archivo El codigo que pensé ocultara al input de acuerdo al tutorial sin perder su funcionalidad le agregue que al hacer click en el boton subirá el archivo y pintara solo al boton seleccionado de rojo Al seleccionar otro botón se mantendrán los seleccionados pintados y se pintara al nuevo boton seleccionado.Me parece mejor ir pintando a medida que seleccionamos que partir de todos pintados para despintarlos al seleccionarlos Permutando la respuesta del true de la condición pueden obtenerse tambien esto ultimo.

En tu codigo se complica por el *ngfor al usar Jquery lo cual ademas no se aconseja en Angular

//ts
weekDays = ['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo'];
onFileSelected($event:Event,indexOfelement:number){
console.log('$event:-->',$event,'indexOfelement:',indexOfelement);

  }
getColorIndex($event:Event,indexOfelement:any):string{
  console.log('indexOfelement:',indexOfelement)
 return ''
}
//html
<ul *ngFor="let day of weekDays;let indexOfelement=index">
<input class="file-input" 
   onchange="console.log('onchange',event.target.files)"
   name="{{indexOfelement}}" 
   (change)="onFileSelected($event,indexOfelement)" 
   type="file" id="{{indexOfelement}}" #fileUpload ngDefaultControl>

 <button   mat-mini-fab color="primary" class="upload-btn"
   [ngStyle]="{
    'background-color':selectedItem == indexOfelement? 
   '#FF0000' :'getColorIndex($event,indexOfelement)'
      }" 
 (click)="fileUpload.click()" ngDefaultControl  name="{{indexOfelement}}" id="{{indexOfelement}}" >
     <mat-icon>attach_file</mat-icon>
 </button>hola {{color}}
  </li>
 </ul> 
      

2. Si ocultar al Input El codigo no esta desplegado por lo simple de la solucion

//scss
     input[type=file]::-webkit-file-upload-button {
        border: 1px solid grey;
        background: #d6eed1;
    }
    //ts
     selectedInput!:number;
    onlyInput($event:Event,indexOfelement:number){
        this.selectedInput=indexOfelement;
        const element = $event.target as HTMLInputElement;
        console.log('id:',($event.target as Element).id);
        element.setAttribute("style", "color:white;background-color:olive ; border: 10px solid yellow" );
          
      }
      //HTM
      <div>
      <ul *ngFor="let day of weekDays;let indexOfelement=index">
    
        <li>{{day}}
          <input  onchange="console.log('onchange',event.target.files)"
           name="{{indexOfelement}}"
            (change)="onlyInput($event,indexOfelement)"
             type="file" id="{{indexOfelement}}" >
            </li>
      </ul>    
    
    </div>
      
4
  • El codigo ocultara al input pero no pierde su funcionalidad al hacer click en el boton subira el archivo y pintara solo al boton seleccionado de rojo Al seleccionar otro boton se mantendran los seleccionados pintados y se pintara al nuevo boton seleccionado.Modifica el estilo de cada input en forma independiente
    – nestdan
    el 22 jun. 2022 a las 23:07
  • para verlo funcionando en nestdanchia.github.io/inputFile y el repo github.com/nestdanchia/inputFile
    – nestdan
    el 22 jun. 2022 a las 23:45
  • Tengo una duda, ¿a qué corresponde "selectedItem"? el 25 jun. 2022 a las 17:04
  • selectedInput por si puede interesar algo adicional como guardar a los items seleccionados en un array Ya que el *ngFor numera mediante mediante el index a cada uno de ellos por eso lo use al denotar el name y el id de cada item pero no lo use en el ts lo deje expresado en el ts por si te interesaba usarlo para algo adicional...
    – nestdan
    el 26 jun. 2022 a las 17:13

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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