如何防止使用动态输入字段提交表单（Angular 中的反应式表单）

Question

我正在阅读 Angular 中关于响应式表单的博客。我尝试创建一个包含以下字段的简单表单：

用户名
电子邮件
课程
技能
性别

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。检查浏览器中的控制台日志并指出我的错误。为什么 'Add more' 按钮也在提交表单。感谢期待。

P.S：那个博客里的代码是这样写的：

Answer 1

在 <button> 元素上设置属性 type="button"。默认情况下，表单中的 HTML 个按钮是提交类型

如何防止使用动态输入字段提交表单（Angular 中的反应式表单）

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

angular

angular-reactive-forms