Angular FormGroup.AddControl 导致表单提交

Question

我正在处理一个看起来像这样的 Angular 表单：

form = new FormGroup({});
itemCount = 0

addItem(value?: string) {
  const newFormControl = new FormControl({
      value: value || '',
      disabled: value ? false : true
    });
    
    this.form.addControl(`item.${this.itemCount}`, newFormControl);
    this.items.push({/* item goes here*/})
    this.brandCount++;
}

<form (ngSubmit)="onSubmit()" [formGroup]="form" class="full-width">
  <button mat-button color="primary" (click)="addNewItem()">
    Add Item
   </button>
   // a div with an #ngFor directive to loop over the items array
   // and has some basic markup
   <button type="button" mat-icon-button 
    (click)="deleteItem($event, i)">
      <mat-icon>delete</mat-icon>
    </button>
</form>

我遇到的问题是对 this.form.addControl 的调用导致 onSubmit 函数被调用。应用程序中的其他组件没有发生这种情况，到目前为止，我能看到的唯一区别是 "Add Items" 按钮不在表单内。这有什么不同，还是我在这里遗漏了什么？

谢谢！

Answer 1

由于某些原因，默认情况下 'form' 将所有按钮视为提交按钮。您忘记在添加项目按钮中添加 type="button"。

解决这个问题。

form = new FormGroup({});
itemCount = 0

addItem(value?: string) {
  const newFormControl = new FormControl({
      value: value || '',
      disabled: value ? false : true
    });
    
    this.form.addControl(`item.${this.itemCount}`, newFormControl);
    this.items.push({/* item goes here*/})
    this.brandCount++;
}

<form (ngSubmit)="onSubmit()" [formGroup]="form" class="full-width">
  <button mat-button type="button" color="primary" (click)="addNewItem()">
    Add Item
   </button>
   // a div with an #ngFor directive to loop over the items array
   // and has some basic markup
   <button type="button" mat-icon-button 
    (click)="deleteItem($event, i)">
      <mat-icon>delete</mat-icon>
    </button>
</form>

Answer 2

将 html 中的声明更改为 div。它会起作用。

<div [formGroup]="form" class="full-width">
    <button (click)="addItem()">
      Add Item
    </button>
    // a div with an #ngFor directive to loop over the items array
    // and has some basic markup
    <button type="button"   (click)="deleteItem($event, i)">
        delete
    </button>
    <button type="button" (click)="onSubmit()">
        submit
    </button>
</div>

Angular FormGroup.AddControl 导致表单提交

Angular FormGroup.AddControl causing form to submit

angular

formgroups