Javascript Question posted in
A very good W3school tutorial can be found here.

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    add in html:

     <mat-error *ngIf="dataEntryMainFormGroup.get('occupation').hasError('required')&& 
     (dataEntryMainFormGroup.get('occupation').dirty || 
    dataEntryMainFormGroup.get('occupation').touched)
         ">
       {{msgConfig.td_data_entry_required_occupation}}
     </mat-error>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search