2

Con la librería ngx-input-file inserto un campo de tipo files para varias imágenes, este me funciona correctamente, el problema es cuando le agrego la etiqueta formControlName, se desaparece la opción de insertar imágenes.

Mi HTML:

<input-file fileAccept="image/*" fileLimit="10" placeholder="Máx 10 Imagenes" formControlName="imagenes"></input-file>

En el componente (en el constructor):

this.crearForm = this.formBuilder.group({
  nombre: new FormControl('', [
    Validators.required,
    Validators.minLength(2),
    Validators.maxLength(50),
  ]),
  precio: new FormControl('', [
    Validators.required,
    Validators.min(1),
    Validators.max(1000),
  ]),
  imagenes: new FormControl('', [
    Validators.required,
  ]),
});

No tengo ningún problema con ningún otro campo, solo con ese, y llego a pensar que es porque se le da el valor de '' y eso elimina la opción (creo).

Sin la etiqueta:

error

Con la etiqueta:

error

¿Alguna idea del por que?

Actualización 1:

Mi form un poco mas detallado.

<form [formGroup]="crearForm" (ngSubmit)="crearSubmit()">
  <input mdbInputDirective type="text" formControlName="nombre" class="form-control" [ngClass]="{ 'is-invalid': crearSubmitted && crearF.nombre.errors }" [mdbValidate]="false"/>
  <label for="nombre">Nombre</label>
  <input mdbInputDirective type="number" formControlName="precio" class="form-control" [ngClass]="{ 'is-invalid': crearSubmitted && crearF.precio.errors }" [mdbValidate]="false"/>
  <label for="precio">Precio</label>
  <pre>Imagenes Demostrativas</pre>
  <input-file fileAccept="image/*" fileLimit="10" placeholder="Máx 10 Imagenes"></input-file>
  <button type="button" [disabled]="loading" class="btn btn-primary btn-sm waves-light" (click)="crearSubmit()" mdbWavesEffect>Guardar</button>
</form>

2 respuestas 2

2
+50

El problema es un pequeño bug en el componente input-file:

Si pones

imagenes: new FormControl('', [
    Validators.required,
])

Ocurre lo que dices.

Pero si pones

imagenes: new FormControl([], [
    Validators.required,
])

funciona.

Motivo: En el código fuente del componente (gracias, Open Source!) puedes ver que lo que espera es un array de ficheros, no un string. Al inicializarlo con un string vacío deja de funcionar.

He creado un ejemplo para jugar con él aquí

0

Para utilizar formControlName se debe estar precedido de la directiva FormGroup y la consecuente estructura en la lógica del componente (.ts), según https://angular.io/api/forms/FormControlName esta se realiza de la siguiente forma, En el template: ` Name is too short.

  <input formControlName="first" placeholder="First name">
  <input formControlName="last" placeholder="Last name">

  <button type="submit">Submit</button>

`

Por el código que muestras la lógica esta correcta por lo que me inclino a pensar que el problema se encuentra el la directiva formGroup del html

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.