Incorrect form validations triggered

I have formgroup which has input fields, the validations are set like this :

<mat-form-field class="mat-width-98" appearance="outline">
                        <mat-label>Profession Occupation/ Job</mat-label>
                        <input matInput placeholder="Profession Occupation/ Job" formControlName="occupation"
                               (focusout)="onFocusOutEvent($event, 'occupation')"
                               [ngClass]="isMatched('occupation') ? '' : 'input-highlight'"
                               maxlength="{{moduleConfig.td_reg_occupation_length}}">
                        <mat-error *ngIf="dataEntryMainFormGroup.get('occupation').hasError('required') ">
                          {{msgConfig.td_data_entry_required_occupation}}
                        </mat-error>
                        <mat-error *ngIf="dataEntryMainFormGroup.get('occupation').hasError('invalidNameFormat') ">
                          {{msgConfig.td_registration_validation_invalid_occupation}}
                        </mat-error>
                      </mat-form-field>

Here is the validation set :

      occupation: new FormControl('', [Validators.required, this.validationService.invalidNameFormat.bind(this)]),

The problem here is validations are triggered correctly but even when i click a different button on the UI these validations are shows, that button has nothing to do with these validations. I want it to be triggered when outfocused.

Keep in mind these are tab am working with

I found a simple solution which was missing here what i did,

There were many buttons in my component, but i was forget to mention the type, here it is :

<button type="button">