How to prevent Form submisson (Reactive Form in Angular) with dynamic input fields

Issue

Here is a stackblitz.

I was reading a blog about Reactive forms in Angular. I tried creating a simple form with following fields:

1. Username
2. Email
3. Courses
4. Skills
5. Gender

Skills is slightly different. It is a dynamic field. There is a button which says [Add more]. 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'.

Template:

<div class="row justify-content-center">
  <div class="col-md-6 text-left bg-white rounded shadow py-3">
    <form [formGroup]="myReactiveForm" (ngSubmit)="onSubmit()">
      <div formGroupName="userDetails">
        <div class="form-group">
          <label for="username">Username</label>
          <input
            type="text"
            class="form-control"
            id="username"
            formControlName="username"
            placeholder="Enter username"
          />
        </div>
        <div class="form-group">
          <label for="email">Password</label>
          <input
            type="email"
            class="form-control"
            id="email"
            formControlName="email"
            placeholder="john@gmail.com"
          />
          <small
            class="text-danger"
            *ngIf="
              !myReactiveForm.get('userDetails.email').valid &&
              myReactiveForm.get('userDetails.email').touched
            "
            >Please enter a valid email address</small
          >
        </div>
      </div>
      <div class="form-group">
        <label class="course" for="course">Select course</label>
        <select class="form-control" id="course" formControlName="course">
          <option value="Angular">Angular</option>
          <option value="HTML">HTML</option>
          <option value="JavaScript">JavaScript</option>
        </select>
      </div>
      <div class="form-group" formArrayName="skills">
        <label for="skills">Skills</label>

        <ng-container
          *ngFor="
            let skill of myReactiveForm.get('skills')['controls'];
            let i = index
          "
        >
          <input
            type="text"
            class="form-control mt-2"
            id="skills"
            [formControlName]="i"
            placeholder="Add skills"
          />
        </ng-container>
        <button
          class="btn btn-primary btn-sm mt-3 btn-add"
          (click)="onAddSkills()"
        >
          <i>+</i> Add more
        </button>
      </div>
      <div class="form-group">
        <div class="custom-control custom-radio" *ngFor="let gender of genders">
          <input
            type="radio"
            id="{{ gender.id }}"
            formControlName="gender"
            value="{{ gender.genderType }}"
            class="custom-control-input"
          />
          <label class="custom-control-label" for="{{ gender.id }}">{{
            gender.genderType
          }}</label>
        </div>
      </div>
      <button type="submit" class="btn btn-success">Submit</button>
    </form>
  </div>
</div>

Typescript:

  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)]),
    });
  }

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.

Solution

Set an attribute type="button" on the <button> element. By default HTML buttons in a form are of type submit

Answered By - Drenai