How to insert "ngx-input-file" with "formControlName"?

Navigation
2

With the library ngx-input-file I insert a field of type files for several images, this works correctly, the problem is when I add the formControlName tag, the option to insert images disappears.

My HTML : 

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

In the component (in the 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,
  ]),
});

I have no problem with any other field, just with that, and I think that it is because it is given the value of '' and that eliminates the option (I think).

Without the tag:

With the tag:

Any ideas why?

Update 1:

My form a little more detailed. 

<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>
    
asked by Pablo Contreras 06.10.2018 в 21:52
source

2 answers

2

The problem is a small bug in the input-file component:

If you put 

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

What you say happens.

But if you put 

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

works.

Reason: On the component source code (thanks, Open Source!) You can see that what you expect is an array of files, not a string. Initializing it with an empty string stops working.

I created an example to play with him here

    
answered by 09.10.2018 / 17:53
source
0

To use formControlName you must be preceded by the FormGroup directive and the consequent structure in the component logic (.ts), according to link this is done in the following way,  In the template: '        Name is too short. 

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

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

'

Because of the code that shows the logic is correct, I am inclined to think that the problem lies in the formGroup directive in html

    
answered by 09.10.2018 в 10:05
IndexError: list assignment index out of range with lists and input (). split () MySQL does not return data in a column