Angular 9 表单提交选项

Question

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

我的想法是识别 html 中的按钮，并且在我的 onAddItem() 逻辑中，在处理新项目后，有一个 if 语句到 form.resetForm();或 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>

和我的相关 controller.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) and (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..
   }

Angular 9 表单提交选项

Angular 9 Form submit options

angular

angular-forms

angular9