Tengo un problema con los "Reactrive forms" de Angular. El caso es que yo tenía un formulario "Template Driven" pero decidí cambiarlo para realizar las validaciones mediante estos formularios. En uno de ellos subo una imagen, y en los formularios de plantilla enlazando el modelo con "ngModel" no tenía problema, ya que después de rellenar el formulario y enviarlo, mostraba una ventana de diálogo notificando que la inserción sehabía realizado y redirigía a una pantalla en la que se presentan todos los datos de una tabla de la base de datos. Ahora cada vez que lo envío con el "Reactive Form" se reseta el formulario, no realiza la navegación a la pantalla de presentación y no presenta el diálogo, pero si hace las inserciones en la base de datos. Cuando envío el formulario sin subir imagen funciona como espero, pero si añado imagen no se presenta nada de lo que pretendo. ¿A que se debe este comportamiento? No acabo de entenderlo. A continuación presento algo de código:
Plantilla HTML:
<form [formGroup]="addEntityForm" (submit)="onSubmit()">
<div class="cardContainer">
<mat-form-field appearance="outline" color="accent">
<mat-label>Nombre de la entidad (Logintud máxima: 25)</mat-label>
<input matInput type="text" maxlength="25" name="nombre_entidad"
formControlName="entityName">
</mat-form-field>
<div *ngIf="addEntityForm.controls.entityName.invalid">
<p *ngIf="addEntityForm.controls.entityName.errors.required && addEntityForm.controls.entityName.touched"
class="alert-danger" [@fadeAnimation]="'in'">
Este campo es requerido.
</p>
</div>
<mat-form-field appearance="outline" color="accent">
<mat-label>Cif de la entidad (Logintud máxima: 20)</mat-label>
<input matInput maxlength="20" name="cif_entidad"
formControlName="entityCif">
</mat-form-field>
<div *ngIf="addEntityForm.controls.entityCif.invalid">
<p *ngIf="addEntityForm.controls.entityCif.errors.required && addEntityForm.controls.entityCif.touched"
class="alert-danger" [@fadeAnimation]="'in'">
Este campo es requerido.
</p>
<p *ngIf="addEntityForm.controls.entityCif.errors.invalidCif" class="alert-danger" [@fadeAnimation]="'in'">
Ya existe una entidad con el mismo Cif.
</p>
</div>
<mat-card>
<p>Logo de la entidad</p>
<button mat-raised-button color="primary" type="button" style="position: relative; margin-bottom: 15px;"
matTooltip="Solo archivos de imagen">Seleccionar archivo
<input type="file" #image accept="image/*" (change)="onSelectImage($event)"
style="opacity: 0; cursor: pointer; height: 100%; width: 100%; position: absolute; left: 0; top: 0;" formControlName="entityLogo">
</button>
<div *ngIf="imageToUpload != undefined" [@fadeAnimation]="'in'">
<p>Imagen seleccionada</p>
<mat-chip-list #chipList>
<mat-chip style="margin-bottom: 15px;" [removable]="removable">
{{imageToUpload.name}}
<mat-icon matChipRemove *ngIf="removable" (click)="deleteSelection(image)">cancel</mat-icon>
</mat-chip>
</mat-chip-list>
</div>
<div [@fadeAnimation]="'in'" *ngIf="imageUrl != undefined">
<p>Previsualización de imagen:</p>
<div id="entityImageDiv" style="border: 1px solid #ccc">
<img id="entityImage" src="{{imageUrl}}">
</div>
</div>
</mat-card>
</div>
<div class="buttonContainer">
<button mat-raised-button color="primary" [disabled]="addEntityForm.invalid">Aceptar</button>
</div>
</form>
Código en componente:
onSubmit(){
this.entity.nombre_entidad = this.addEntityForm.get('entityName').value;
this.entity.cif_entidad = this.addEntityForm.get('entityCif').value;
let userData = JSON.parse(localStorage.getItem('identity'));
this.entity.usuario_cre = userData.USUARIO;
this._entityService.addEntity(this.entity, this.imageToUpload).subscribe(
response => {
this.openInsertedDialog(response['message']);
this._router.navigate(['/entidades']);
},
error => {
console.log(error);
}
);
}
Componente imagen:
onSelectImage(event){
this.imageToUpload = <File>event.target.files[0];
let reader = new FileReader();
reader.onload = () => {
this.imageUrl = reader.result as string;
}
reader.readAsDataURL(this.imageToUpload);
}
Servicio:
addEntity(newEntity, file): Observable<Entity> {
let formData = new FormData();
if (file != undefined) {
formData.append('image', file, file.name);
}
let entityKeys = Object.keys(newEntity);
for (let k of entityKeys) {
formData.append(k, newEntity[k]);
}
return this._http.post<Entity>(this.serviceUrl + '/api/entidad/nuevaEntidad', formData);
}
Es como si el formulario se resetease sin intención. Se salta toda la parte de la navegación del router y la presentación del dialogo. REcarga e nuevo el componente del formulario. Si me da mucha guerra vovleré a los formularios de plantilla y trabajaré en una validación por mi cuenta. Pero estaría bien so alguien puede explicarme más o menos las causas de ese comportamiento, cuando en los formularo de plantilla todo se realiza según se espera.
Gracias de antemano, si se necesita cualquier información adicional me lo comentáis. Un saludo.
EDITO:
Inicializo el formulario con este código en el constructor del componente:
this.addEntityForm = fb.group({
'entityName': [this.entity.nombre_entidad, [
Validators.maxLength(25),
Validators.required
]],
'entityCif': [this.entity.cif_entidad, [
Validators.maxLength(20),
Validators.required,
this.entityCifValidation.bind(this),
]],
'entityLogo': [this.entity.ruta_logo]
});
Una vez envio los datos al servicio dentro de la respuesta del observable hago la redirección a la pantalla donde se presentan todas las inserciones que se han hecho en la base de datos:
response => {
this.openInsertedDialog(response['message']);
this._router.navigate(['/entidades']);
},
this.addEntityForm.get('entityLogo').valueChanges.subscribe(value => ...)