Angular表单处理

汪喆_Jack

于 2019-04-18 23:43:30 发布

阅读量737

点赞数

分类专栏： Angular相关文章标签： Angular 模板驱动表单响应式表单

本文链接：https://blog.youkuaiyun.com/qq_34829447/article/details/89390844

版权

本文探讨了Angular中的两种表单处理方式：模板驱动表单和响应式表单。对于模板驱动表单，讲解了如何导入FormsModule及ngModel的使用。而在响应式表单部分，介绍了核心组件FormControl、FormGroup和FormBuilder，以及验证器和异步验证器的运用。此外，还讨论了如何通过自定义表单控件来简化复杂表单的管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.模板驱动表单

1.模板驱动型表单

导入FormsModule,ngModel属于FormsModule的，故若想使用ngModel也需要导入FormsModule

module导入实例代码

import { FormsModule } from '@angular/forms';
@NgModule({
    imports: [
    	FormsModule//引入模驱动表单
  	],
    ...
})

html实例代码

<form #f="ngForm" (ngSubmit)="onSubmit(f,$event)"><!-- 针对所有的<form>默认的添加了ngForm指令 -->
    <input type="text" placeholder="请创建一个任务" [(ngModel)]="desc" name="desc"

最低0.47元/天解锁文章