Javascript 如何使用Angular将按钮与窗体关联？

我正在使用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

或在按钮的单击事件中移动/复制提交处理程序

您可以通过引用表单的

#form

并将相同的引用传递给按钮来实现

点击我！

工作副本在这里-

您可以通过引用表单的

#form

并将相同的引用传递给按钮来实现

点击我！

工作副本在这里-

按此操作

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

点击我！

像这样做

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

点击我！

好吧，您可以使用反应式表单，然后单击此按钮。调用一个函数来提取表单的值并对其执行操作

这样，您还可以在表单无效时禁用按钮

下面是您的表单的外观：

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>

用户表单

名字：


姓氏：


提交

---

这里有一个供你参考的表格。

好吧，你可以使用一个反应式表格，然后点击这个按钮。调用一个函数来提取表单的值并对其执行操作

这样，您还可以在表单无效时禁用按钮

下面是您的表单的外观：

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>

用户表单

名字：


姓氏：


提交

这是给你的裁判的一封信