Currently, I am working with a formgroup that contains input fields with validations set up in the following manner:
<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>
The validation setup for 'occupation' is as follows:
occupation: new FormControl('', [Validators.required, this.validationService.invalidNameFormat.bind(this)]),
An issue arises where these validations are triggered even when clicking on a different button in the UI, which should not be the case. The intended behavior is for the validations to only trigger when the field is outfocused.
It is important to note that I am currently working with tabs in this scenario.