title: How can I stop the angular reactive form validation from activating when clicking close button
body: <p>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.</p>
  
  <p>These are the relevant bits of the TS file:</p>
  
  <pre><code>  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 });
    }
  </code></pre>
  
  <p>And this is the html:</p>
  
  <pre><code>&lt;form [formGroup]="addPaymentForm" (ngSubmit)="submit()"&gt;
      &lt;label for="jobId"&gt;Job Id&lt;/label&gt;
      &lt;input type="number" id="jobId" class="form-control" formControlName="jobId" required&gt;
      &lt;div *ngIf="f.jobId.invalid &amp;&amp; (f.jobId.dirty || f.jobId.touched)" class="alert alert-danger mt-2"&gt;
          &lt;div *ngIf="f.jobId.errors.required"&gt;
              Job Id is required
          &lt;/div&gt;
          &lt;div *ngIf="f.jobId.errors.maxlength"&gt;
              Invalid Job Id
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;label for="grossAmount"&gt;Gross Amount&lt;/label&gt;
      &lt;input id="grossAmount" type="number" class="form-control" formControlName="grossAmount" required&gt;
      &lt;div *ngIf="f.grossAmount.invalid &amp;&amp; (f.grossAmount.dirty || f.grossAmount.touched)"
          class="alert alert-danger mt-2"&gt;
          &lt;div *ngIf="f.grossAmount.errors.required"&gt;
              Gross Amount is required
          &lt;/div&gt;
          &lt;div *ngIf="f.grossAmount.errors.max || f.grossAmount.errors.min"&gt;
              Invalid Gross Amount
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;button type="button" class="btn btn-outline-dark" [disabled]="submitting" (click)="close()"&gt;Close&lt;/button&gt;
      &lt;button type="submit" class="btn btn-primary"
          [disabled]="!addPaymentForm.valid || !jobDetail || submitting"&gt;{{ submitting ? "Please wait" : "Save"}}&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I've tried moving the close button outside the form tags but that doesn't make any difference.</p>
  
  <p>EDIT: OK I've created a stackblitz to demonstrate the issue.
  <a href="https://stackblitz.com/edit/angular-ng-bootstrap-modal-content-4e9fac" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ng-bootstrap-modal-content-4e9fac</a>
  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.</p>