如何使用Angular將按鈕與表單關聯？

Question

我正在使用Angular 6.x，並且我想將位於DOm中表單外部的Submit按鈕與其關聯。 也就是說，我想完成一些結構上與此等效的事情：

<button type='submit' form='myform'>
  click me!
</button>

<form id='myform' action='#' onsubmit='console.log("wheee")'>
  <input type='submit' value='me too'/>
</form>

即我想處理來自表單元素的submit事件。

有沒有一種方法可以執行此操作而無需通過nativeElement或在按鈕的click事件上不移動/復制提交處理程序？

Answer 1

您可以通過引用#form並將相同的引用傳遞給button來實現。

<button type='button' (click)="form.onsubmit()">
  click me!
</button>

<form id='myform' #form action='#' onsubmit='console.log("wheee")'>
  <input type='submit' value='me too'/>
</form>

工作副本在這里-https://stackblitz.com/edit/angular-pnneks

Answer 2

像這樣。

<button type='submit'  (click)="myForm.submit()">
  click me!
</button>

<form id='myform' action='#' #myForm onsubmit='console.log("wheee")'>
  <input type='submit' value='me too'/>
</form>

Answer 3

好吧，您可以使用“反應形式”，然后單擊此按鈕。 調用一個函數，該函數將提取表單的值並對其進行處理。

這樣，您還可以執行諸如表單無效時禁用按鈕的操作。

因此，您的表單將如下所示：

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.userForm = this.fb.group({
      firstName: [, Validators.required],
      lastName: [, Validators.required]
    });
  }

  submitForm() {
    console.log('Form Submitted with value: ', this.userForm.value);
  }
}

這是模板：

<h3>User Form</h3>
<hr>
<form [formGroup]="userForm">
  <div>
    <label for="firstName">First Name: </label>
    <input type="text" id="firstName" formControlName="firstName">
  </div>
  <br>
  <div>
    <label for="lastName">Last Name: </label>
    <input type="text" id="lastName" formControlName="lastName">
  </div>
</form>
<br>
<button (click)="submitForm()" [disabled]="userForm.invalid">Submit</button>

這是供您參考的示例StackBlitz 。