title: How to prevent Form submisson (Reactive Form in Angular) with dynamic input fields
body: <p>Here is a <a href="https://stackblitz.com/edit/angular-ivy-3zattr" rel="nofollow noreferrer">stackblitz</a>.</p>
  <p>I was reading a blog about Reactive forms in Angular. I tried creating a simple form with following fields:</p>
  <ol>
  <li>Username</li>
  <li>Email</li>
  <li>Courses</li>
  <li>Skills</li>
  <li>Gender</li>
  </ol>
  <p><code>Skills</code> is slightly different. It is a dynamic field. There is a button which says <strong>[Add more]</strong>. User can keep on adding as many skills as he wants. Button is working fine. But it is also calling 'onSubmit' method which is supposed to be called iff the user clicks on 'Submit'.</p>
  <p><strong>Template:</strong></p>
  <pre><code>&lt;div class=&quot;row justify-content-center&quot;&gt;
    &lt;div class=&quot;col-md-6 text-left bg-white rounded shadow py-3&quot;&gt;
      &lt;form [formGroup]=&quot;myReactiveForm&quot; (ngSubmit)=&quot;onSubmit()&quot;&gt;
        &lt;div formGroupName=&quot;userDetails&quot;&gt;
          &lt;div class=&quot;form-group&quot;&gt;
            &lt;label for=&quot;username&quot;&gt;Username&lt;/label&gt;
            &lt;input
              type=&quot;text&quot;
              class=&quot;form-control&quot;
              id=&quot;username&quot;
              formControlName=&quot;username&quot;
              placeholder=&quot;Enter username&quot;
            /&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-group&quot;&gt;
            &lt;label for=&quot;email&quot;&gt;Password&lt;/label&gt;
            &lt;input
              type=&quot;email&quot;
              class=&quot;form-control&quot;
              id=&quot;email&quot;
              formControlName=&quot;email&quot;
              placeholder=&quot;john@gmail.com&quot;
            /&gt;
            &lt;small
              class=&quot;text-danger&quot;
              *ngIf=&quot;
                !myReactiveForm.get('userDetails.email').valid &amp;&amp;
                myReactiveForm.get('userDetails.email').touched
              &quot;
              &gt;Please enter a valid email address&lt;/small
            &gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label class=&quot;course&quot; for=&quot;course&quot;&gt;Select course&lt;/label&gt;
          &lt;select class=&quot;form-control&quot; id=&quot;course&quot; formControlName=&quot;course&quot;&gt;
            &lt;option value=&quot;Angular&quot;&gt;Angular&lt;/option&gt;
            &lt;option value=&quot;HTML&quot;&gt;HTML&lt;/option&gt;
            &lt;option value=&quot;JavaScript&quot;&gt;JavaScript&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-group&quot; formArrayName=&quot;skills&quot;&gt;
          &lt;label for=&quot;skills&quot;&gt;Skills&lt;/label&gt;
  
          &lt;ng-container
            *ngFor=&quot;
              let skill of myReactiveForm.get('skills')['controls'];
              let i = index
            &quot;
          &gt;
            &lt;input
              type=&quot;text&quot;
              class=&quot;form-control mt-2&quot;
              id=&quot;skills&quot;
              [formControlName]=&quot;i&quot;
              placeholder=&quot;Add skills&quot;
            /&gt;
          &lt;/ng-container&gt;
          &lt;button
            class=&quot;btn btn-primary btn-sm mt-3 btn-add&quot;
            (click)=&quot;onAddSkills()&quot;
          &gt;
            &lt;i&gt;+&lt;/i&gt; Add more
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;div class=&quot;custom-control custom-radio&quot; *ngFor=&quot;let gender of genders&quot;&gt;
            &lt;input
              type=&quot;radio&quot;
              id=&quot;{{ gender.id }}&quot;
              formControlName=&quot;gender&quot;
              value=&quot;{{ gender.genderType }}&quot;
              class=&quot;custom-control-input&quot;
            /&gt;
            &lt;label class=&quot;custom-control-label&quot; for=&quot;{{ gender.id }}&quot;&gt;{{
              gender.genderType
            }}&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;button type=&quot;submit&quot; class=&quot;btn btn-success&quot;&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>Typescript:</strong></p>
  <pre><code>  ngOnInit() {
      this.myReactiveForm = new FormGroup({
        userDetails: new FormGroup({
          username: new FormControl(null, Validators.required),
          email: new FormControl(null, [Validators.required, Validators.email]),
        }),
        course: new FormControl('HTML'),
        gender: new FormControl('Female'),
        skills: new FormArray([new FormControl(null, Validators.required)]),
      });
    }
  </code></pre>
  <p>Please look at the stackblitz. Check the console logs in browser and point out my mistake. Why that 'Add more' button is submitting the form also. Thanks in anticipation.</p>
  <p>P.S: This is how the code is written in that blog:
  <a href="https://i.stack.imgur.com/cxSom.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cxSom.png" alt="enter image description here" /></a></p>