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
<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