如何使用动态输入字段防止表单提交(角度上的被动表单)

这里有一个 stackblitz .

我在读一篇关于角度反应形式的博客。我尝试创建一个包含以下字段的简单表单:

1. 用户名
2. 电子邮件
3. 课程
4. 技能
5. 性别

Skills 有点不同。这是一个动态的领域。有一个按钮,上面写着 [添加更多] .用户可以继续添加任意多的技能。按钮工作正常。但它也在调用“onSubmit”方法,如果用户单击“Submit”,该方法应该被调用。

模板:

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

打字稿:

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

请看stackblitz。检查浏览器中的控制台日志并指出我的错误。为什么“添加更多”按钮也在提交表单。提前谢谢。

附言:这是该博客中代码的编写方式: