单击按钮以 Angular 提交表单

Angular 是一种流行的前端 JavaScript 框架，用于构建 Web 应用程序。在这篇文章中，我们将介绍如何在 Angular 中使用按钮来提交表单。

创建表单

首先，我们需要创建一个表单。我们可以使用 Angular Form 控件来创建表单。以下是一个示例 HTML 文件，其中我们创建了一个带有输入字段和提交按钮的简单表单。

<form #myForm="ngForm" (ngSubmit)="submitForm(myForm)">
  <div>
    <input type="text" name="name" ngModel required placeholder="Name">
  </div>
  <div>
    <input type="email" name="email" ngModel required placeholder="Email">
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

我们在 form 标记中使用了如下三个 Angular 指令：

• #myForm="ngForm"：在表单中定义了一个名为 'myForm' 的引用变量，用于在代码中调用表单。
• (ngSubmit)="submitForm(myForm)"：当表单提交时，调用 submitForm 函数。
• ngModel：这是 Angular 用于双向绑定表单控件的指令。

编写 TypeScript 代码

现在我们需要在 TypeScript 代码中编写逻辑来处理表单提交事件。我们需要在组件类中编写 submitForm 函数，该函数在表单提交时被调用。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  submitForm(form: any) {
    if (form.valid) {
      // 在这里执行表单提交的逻辑
    }
  }
}

在 submitForm 函数中，我们检查表单是否有效。如果表单有效，则可以执行表单提交的逻辑。

添加提交按钮

现在，我们需要添加一个提交按钮，当用户单击该按钮时，将调用 submitForm 函数。我们可以在表单中添加一个类型为“submit”的按钮，当用户单击该按钮时，将自动调用 submitForm 函数。

<form #myForm="ngForm" (ngSubmit)="submitForm(myForm)">
  <div>
    <input type="text" name="name" ngModel required placeholder="Name">
  </div>
  <div>
    <input type="email" name="email" ngModel required placeholder="Email">
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

总结

现在您已经知道如何在 Angular 中使用按钮提交表单。我们创建了一个表单，然后在 TypeScript 代码中编写了逻辑来处理表单提交事件。最后，我们添加了一个提交按钮，当用户单击该按钮时，将调用 submitForm 函数。

希望这篇文章对你有帮助！