表格简介：模板驱动的形式

>表格在现代前端应用程序中至关重要，每天处理用户交互，从登录和搜索到预订和待办事项列表。 虽然某些形式很简单，但其他形式可能很复杂，涵盖了多个页面。该教程探讨了Angular的模板驱动的形式用于构建它们的方法。 无论您选择哪种方法，都应提供一个可靠的表格库提供：

• 双向数据绑定：保持输入值与组件状态同步。
• 形式状态跟踪：在视觉上表示形式的有效性（例如，使用红色边界对错误）。
• 错误处理：>清楚地显示验证错误。>
>
• 有条件启用/禁用：控制基于验证的部分形式。
Angular提供了两种强大的形式构建策略：模板驱动的形式和模型驱动（反应性）形式。两者都使用

。

构建注册表格：逐步指南

FormsModule此示例使用模板驱动的表单演示了一个简单的注册表单。

用户模型：

定义a
class（或接口）以表示表单数据：>

1. User组件设置：

   >为注册表单创建必要的组件和布局。>

   export class User {
       constructor(
           public id: number,
           public email: string,
           public pwd: string,
           public confirmPwd: string,
           public gender: string,
           public terms: boolean
       ) { }
   }

2. >双向绑定：>使用

用于组件中的form inputs和

ngModel表单提交：使用ngModel>事件处理表单。User

3. 组件逻辑：(ngSubmit)在您的组件的打字稿文件中，处理表单提交：>

4. 完整的示例：在github上提供一个完整的可运行示例（省略为简短）。 此示例包括使用bootstrap的样式。

   onSubmit({ value, valid }: NgForm) {
       console.log(this.user.email);
       console.log("valid: " + valid);
   }

   结论
5. 该教程涵盖了Angular中模板驱动的形式。 虽然简单易于使用较小的形式，但对于复杂形式而言，这种方法的管理较低。 下一个教程将探索模型驱动的形式作为更可扩展的替代方案。

   > >本文结合了Esther Vaati的贡献，Esther Vaati是Envato Tuts的软件开发人员和作者。

以上是表格简介：模板驱动的形式的详细内容。更多信息请关注PHP中文网其他相关文章！