angular - 使用一个按钮 angular 2 提交两个 react 形式

Question

如何用一个按钮提交两个表单？我想用一个添加按钮提交两个表单。因为我在它的末尾使用了第二种形式的按钮。在谷歌上找不到任何帮助

这是我的代码:

<form [formGroup]="addCustomer" (keydown.enter)="$event.preventDefault()" (ngSubmit)="onAddCustomer(addCustomer.value,addCustomer.validator)">

<div class="row">
  <!-- First Name  -->
  <div class="col-sm-4">
    <small>First Name </small>
    <div class="input-group">
      <span class="input-group-addon">
        <i class="fa fa-user-circle" aria-hidden="true"></i>
      </span>
      <input id="reference" type="text" class="form-control" formControlName="firstName" name="Reference" placeholder="First Name ">
    </div>
    <br />
  </div>

  <!-- Last Name -->
  <div class="col-sm-4">
    <small>Last Name</small>
    <div class="input-group">
      <span class="input-group-addon">
        <i class="fa fa-user-circle" aria-hidden="true"></i>
      </span>
      <input id="reference" type="text" class="form-control"formControlName="lastName" name="Reference" placeholder="Last Name">
    </div>
    <br />
  </div>
</div>

</form>
<form [formGroup]="addAdress" (keydown.enter)="$event.preventDefault()" (ngSubmit)="onaddAdress(addAdress.value,addAdress.validator)">

<!-- New Row -->
<div class="row">
  <!-- Address Line 1 -->
  <div class="col-sm-4">
    <small>Address Line 1</small>
    <div class="input-group">
      <span class="input-group-addon">
        <i class="fa fa-address-card-o" aria-hidden="true"></i>
      </span>
      <input  id="reference"formControlName="addressLine1" type="text" class="form-control" name="Reference" placeholder="Address Line 1">
    </div>
    <br />
  </div>


  <!-- Address Line 2 -->
  <div class="col-sm-4">
    <small>Address Line 2</small>
    <div class="input-group">
      <span class="input-group-addon">
        <i class="fa fa-address-card-o" aria-hidden="true"></i>
      </span>
      <input  formControlName="addressLine2" type="text" class="form-control" placeholder="Address Line 2"> </div>
    <br />
  </div>
</div>


<div class="row buttonBox">
  <button type="submit" class="btn btn-primary pull-right">Add</button>
</div>

</form>

Answer 1

当您在场景中使用模型驱动表单时，请编写点击事件而不是 (ngSubmit)

HTML 代码

<form novalidate
 [formGroup]="addCustomer" >

 // all input fields
 </form>


 <form novalidate
  [formGroup]="addAdress">

 // all input fields
 </form>


<div class="row buttonBox">
  <button type="submit" class="btn btn-primary pull-right"  
  (click)="SubmitForm()">Add</button>
</div>

TS代码

class ModelFormComponent implements OnInit {
   addAdress: FormGroup;
   addCustomer: FormGroup;

   ngOnInit() {
   // Initialize your both form here
       this.addAdress = new FormGroup({
         // add form controls here
       });
       this.addCustomer= new FormGroup({
         // add form controls here
       });
   }


   SubmitForm(){
    // here you can access both the forms using  this.addAdress and 
      this.addCustomer and submit a request
   }
}

如果您使用的是模板驱动的表单，那么请这样做

HTML代码

 <form #form1Data="ngForm">
  // your inputs here
 </form>


 <form #form2Data="ngForm">
  // your inputs here
 </form>

 <button (click)="Submit(form1Data.value,form2Data.value)">Submit </button>

TS代码

Submit(form1Data,form2Data){
 // submit your both form Data
}