How can I stop the angular reactive form validation from activating when clicking close button

Question

I have a reactive form in a modal popup, but when I first open the modal, a required field has focus. When I click on the close button the validation is triggered (I think by losing focus), and displays the required field validation message but the button does not click ie. the code behind the button does not run. If you click it again it all works fine.

These are the relevant bits of the TS file:

  ngOnInit() {
    this.addPaymentForm = this.formBuilder.group({
      jobId: ['', [Validators.required, Validators.maxLength(9)]],
      grossAmount:  ['', [Validators.required, Validators.max(10000), Validators.min(-10000)]]
    });
  }

  get f() { return this.addPaymentForm.controls; }

  close() {
    this.activeModal.close({ dataModified: false });
  }

And this is the html:

<form [formGroup]="addPaymentForm" (ngSubmit)="submit()">
    <label for="jobId">Job Id</label>
    <input type="number" id="jobId" class="form-control" formControlName="jobId" required>
    <div *ngIf="f.jobId.invalid && (f.jobId.dirty || f.jobId.touched)" class="alert alert-danger mt-2">
        <div *ngIf="f.jobId.errors.required">
            Job Id is required
        </div>
        <div *ngIf="f.jobId.errors.maxlength">
            Invalid Job Id
        </div>
    </div>

    <label for="grossAmount">Gross Amount</label>
    <input id="grossAmount" type="number" class="form-control" formControlName="grossAmount" required>
    <div *ngIf="f.grossAmount.invalid && (f.grossAmount.dirty || f.grossAmount.touched)"
        class="alert alert-danger mt-2">
        <div *ngIf="f.grossAmount.errors.required">
            Gross Amount is required
        </div>
        <div *ngIf="f.grossAmount.errors.max || f.grossAmount.errors.min">
            Invalid Gross Amount
        </div>
    </div>
    <button type="button" class="btn btn-outline-dark" [disabled]="submitting" (click)="close()">Close</button>
    <button type="submit" class="btn btn-primary"
        [disabled]="!addPaymentForm.valid || !jobDetail || submitting">{{ submitting ? "Please wait" : "Save"}}</button>
    </div>
</form>

I've tried moving the close button outside the form tags but that doesn't make any difference.

EDIT: OK I've created a stackblitz to demonstrate the issue. https://stackblitz.com/edit/angular-ng-bootstrap-modal-content-4e9fac It does seem to work better than my actual code though as the JobId field is not in focus automatically on this example, so please click into the JobId field when the modal pops up to simulate my situation. Not sure why the field is in focus in my code, I think it's down to a version difference with ng-bootstrap, maybe if I could change that then this wouldn't really be an issue.

I haven't visited the input field, just popped up the modal then try to press close. The input field does have the cursor in it when I open the modal though, so I think it's when the input loses focus that it runs the validation, but that blocks the button click. — fosbie
OK, stackblitz complete, please see my edit at the bottom of the question. — fosbie

yurzui yurzui · Accepted Answer · 2020-04-29T16:06:32

Your thoughts are correct here: validation is firing on blur event at the time you're clicking Cancel button.

A new validation block appears in the screen and Cancel button is shifted below. Since it is shifted the click event is not triggered.

There are many ways to solve it:

1) Use mousedown event instead of click so that blur event won't happen

<button type="button" ... (mousedown)="close()">Close</button>

Forked Stackblitz

2) Trigger validation only on submit

3) Remove error blocks from the main flow(e.g. set them position absolute) so they won't shift Cancel button

How can I stop the angular reactive form validation from activating when clicking close button

2 Answers