Angular 9表单提交选项

Question

我有一个添加项目的表格。我有两个按钮，一个用于提交表单，添加项目并导航回项目列表，第二个按钮用于提交表单，清除它并保留在页面上以再次输入新项目。

我的想法是确定html中的按钮，并在处理新项目后在我的onAddItem（）逻辑中对form.resetForm（）进行if语句；或router.navigate（[''item-list-page']）;

但是我没有实现这种思路的运气。

我的代码当前看起来像：

html：

<div class="side-form">
  <h1>{{title}}</h1>
  <div class="form-container">
    <form (ngSubmit)="onAddItem(f)" #f="ngForm">
      <div class="form-group">
        <label for="y">Y</label>
        <input type="text" name="y" ngModel class="form-control" required />
      </div>
      <div class="form-group">
        <label for="x">X</label>
        <input type="text" name="x" ngModel class="form-control" required />
      </div>
      <div class="form-group">
        <button class="btn btn-primary">  
          Create
        </button>
        <button class="btn btn-outline-primary">
          Create and add another 
        </button>
      </div>
    </form>
    <button class="btn btn-outline-primary" routerLink="/x">
      Cancel
    </button>
  </div>
</div>

和我的相关控制器。ts

export class ItemNewComponent implements OnInit {
  title: string;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private itemService: ItemService
  ) {}

  ngOnInit(): void {
    this.title = 'Add Item';
  }

  onAddItem(form: NgForm) {
    const value = form.value;
    const newItem = new Item(
      value.y,
      value.x,
    );
    this.itemService.addItem(newItem);
    this.router.navigate(['item']);
  }
}

[我尝试了几个不同的选项，包括将逻辑分离为两个不同的功能，并将单击侦听器分配给按钮以触发相关功能，但那里也没有运气。

提前感谢

Answer 1

对于每个按钮，

不要使用（ngSubmit）=“ onAddItem（f）”使用（click）=“ onAddItem（f）和（click）=” onAddItem（f，true））。带有ype =“ submit”的按钮是缺陷按钮-如果您按ENTER键，请执行此按钮的操作-

 <div class="form-group">
    <button type="button" (click)="onAddItem(f) class="btn btn-primary">  
      Create
    </button>
    <button type="submit" (click)="onAddItem(f,true) class="btn btn-outline-primary">
      Create and add another 
    </button>
  </div>

onAddItem(form: NgForm,goOn:boolean=false) {
   ....common actions...
   if (goOn)
   {
     ..your code..
   }
   else
   {
     ..your code..
   }