Incorrect form validations triggered

[Aashiq-Ahamed]

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