Question

我正在使用Angular 6.x，并且我想将位于DOm中表单外部的提交按钮与其相关联。也就是说，我要完成在结构上与此等效的事情：

<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>

这是您推荐的Sample StackBlitz。

如何使用Angular将按钮与表单关联？

3 个答案: