Question

使用Angular 9，我具有以下形式：

  <form [formGroup]="form" (ngSubmit)="onSignUp()">
    <label for="email">Email</label>
    <input id="email" type="text" formControlName="email">
    <button type="submit">SignUp as Professor</button>
    <button type="submit">SignUp as Student</button>
  </form>

onSignUp方法是：

onSignUp(type: string) {
  // Check type and sign up
}

提交表单后如何传递类型？

<button type="submit">SignUp as Professor</button> -> type = 'professor'

和

<button type="submit">SignUp as Student</button> -> type = 'student'

Answer 1

<form [formGroup]="form">
    <label for="email">Email</label>
    <input id="email" type="text" formControlName="email">
    <button type="submit" (click)="handleProfessorClick($event)">SignUp as Professor</button>
    <button type="submit" (click)="handleStudentClick($event)">SignUp as Student</button>
  </form>

UPD

handleStudentClick(event) {
   event.preventDefault()
   ...your logic
}

handleProfessorClick(event) {
   event.preventDefault()
   ...your logic
}

Answer 2

为简便起见，您应该删除（ngSubmit）并将该功能添加到两个按钮中

在HTML

<form [formGroup]="form" >
<label for="email">Email</label>
<input id="email" ng-model="email" type="text" formControlName="email">
<button  ngClick="onSignUp('Professor')">SignUp as Professor</button>
<button  ngClick="onSignUp('Student')">SignUp as Student</button>

在Js文件中

onSignUp(type: string) {
    let data = {email: this.email, type: type} 
    this.http.post('http://someurl', JSON.stringify(data ));
 }

提交表单时传递参数

2 个答案: