1

Tengo un formulario reactivo en mi proyecto de Angular y dentro de los campos del mismo uno de ellos es un botón que lanza un buscador pero tras ejecutar la búsqueda se ejecuta también el submit del formulario aunque este sea aun invalido y no lo entiendo

formulario

<form (submit)="guardarCambios()" [formGroup]="form" #formDirective="ngForm">
 <div class="contenido">

  <div class="campos">
   <mat-form-field appearance="outline">
    <mat-label>Descripción*</mat-label>
    <!--<input formControlName="descripcion" matInput />-->
    <textarea matInput formControlName="descripcion"></textarea>
    <mat-error *ngIf="form.invalid">El campo Descripción es obligatorio</mat-error>
   </mat-form-field>

   <mat-form-field appearance="outline">
    <mat-label>Fecha de Presentación*</mat-label>
    <input formControlName="fechaPresentacion" matInput [matDatepicker]="picker" />
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
    <mat-error *ngIf="form.invalid">El campo Fecha Presentación es obligatorio</mat-error>
   </mat-form-field>

   <mat-form-field appearance="outline">
    <mat-label>Plazo*</mat-label>
    <input formControlName="plazo" matInput />
    <mat-error *ngIf="form.invalid">El campo Plazo es obligatorio</mat-error>
   </mat-form-field>

   <mat-form-field appearance="outline">
    <mat-label>Presupuesto*</mat-label>
    <input formControlName="presupuesto" matInput />
    <mat-error *ngIf="form.invalid">{{obtenerErrorCampoPresupuesto()}}</mat-error>
   </mat-form-field>

   <div class="organismo">
    <mat-form-field appearance="outline">
      <mat-label>Organismo*</mat-label>
      <input formControlName="organismo" [(ngModel)]="organismoTexto" matInput />
      <mat-error *ngIf="form.invalid">El campo Organismo es obligatorio</mat-error>
    </mat-form-field>

    <button mat-flat-button (click)="buscarOrganismo()" *ngIf="organismoTexto!=''">
      <mat-icon>search</mat-icon>
    </button>
   </div>

  <mat-form-field appearance="outline">
    <mat-label>Clasificación</mat-label>
    <input formControlName="clasificacion" matInput />
  </mat-form-field>

  <mat-form-field appearance="outline">
    <mat-label>Expediente</mat-label>
    <input formControlName="expediente" matInput />
  </mat-form-field>
 </div>

 <div class="organismos" *ngIf="mostrarFiltroOrganismos">
  <h6>Organismo*</h6>
  <app-buscador [modelo]="organismos" [origen]="'organismos'"
    (elementoSeleccionado)='onOrganismoSeleccionado($event)' [elementoSeleccionadoPreviamente]=0>
  </app-buscador>
</div>
<div>
  <button mat-flat-button color="primary" [disabled]="form.invalid">Guardar Cambios</button>
  <a mat-stroked-button routerLink="/">Cancelar</a>
 </div>
</form>

Es decir, no entiendo por que al ejecutar buscarOrganismo() al pulsar en el botón de búsqueda, sin ni si quiera rellenar ninguno del resto de campos obligatorios, se ejecuta tambien guardarCambios() que es el submit del formulario cuando ni siquiera el botón Guardar Cambios está habilitado.

Alguna idea por favor?

Salu2

1 respuesta 1

3

A la hora de añadir un botón, debes acostumbrarte a especificar el atributo type para indicar que tipo de botón es, ya que cada navegador puede asignar un valor por defecto diferente dependiendo del contexto en el que el botón sea añadido.

En tu caso el navegador te lo debe estar marcando por defecto como del tipo submity por eso se envia el formulario. Si lo marcas manualmente como tipo button, debería solucionarse el problema.

<button type="button" mat-flat-button (click)="buscarOrganismo()" *ngIf="organismoTexto!=''">
  <mat-icon>search</mat-icon>
</button>

un saludo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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