开箱即用，Angular为我们提供了两种类型的形式:
- 模板驱动的表单
- 反应形式
在模板驱动的表单中，您可以在组件模板上创建控件，并使用ngModel绑定数据。使用这些，您无需创建控件，表单对象或编写代码来在组件类和模板之间推送和拉取数据; Angular为您完成所有这些任务。在模板驱动的表单中，组件类中用于验证的代码很少，并且它们是异步的。
在响应式表单中，将表单控件创建为组件类中的对象树，并将它们绑定到模板中的本机表单控件。所有验证和表单控件的创建都写在component类中。在反应式表单中，本机表单状态的所有验证和更改都是同步的，因此您可以在组件类中编写代码来观察它们。当数据模型是不可变的并且通常映射到数据库时，您应该选择创建反应式表单。
这两种创建表单的方法之间的主要区别？在反应形式中，您不使用ngModel，required等指令。在component类中创建所有控件及其验证。反应式表单很容易测试和维护，所以在这篇文章中，我们将学习创建一个基本的反应式表单，使用FormControl，FormGroup，FormBuilder类，并添加验证。
步骤1: 添加反应式表单模块
要开始使用响应式表单，首先在App模块中添加ReactiveFormsModle，如下所示:
从 “@ angular/forms” 导入 {ReactiveFormsModule}；从 “./app.com组件” 导入 {AppComponent}；
@ NgModule({声明: [AppComponent],进口: [BrowserModule, ReactiveFormsModule],供应商: []，})导出类AppModule { }
步骤2: 导入所需的模块组件
接下来，您需要在components类中导入所需的响应式表单类，如FormGroup、FormControl、FormArray。我们将使用这些类来构建我们的反应形式。导入这些类后，组件类应如下所示:
从 “@ angular/core” 导入 { Component}；从 “@ angular/forms” 导入 { FormGroup，FormControl，FormArray}；@ Component({'app-root' 选择器，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})AppComponent导出类 {title = “ 反应式演示”；}
您的组件类可以与上面创建的AppComponent不同，具体取决于您的实现; 但是，这里我们导入了FormGroup、FormControl和FormArray类。让我们逐一了解这些课程:
步骤3: 使用FormControl类
FormControl类对应于一个单独的窗体控件，跟踪其值和有效性。在创建响应式表单时，您将创建FormControl类的对象。FormControl构造函数采用三个参数:
- 初始数据值，可以为null。
- 同步验证器数组。这是一个可选参数。
- 异步验证器数组。这是一个可选参数。
在component类中，可以创建一个FormControl，如下面的清单所示:
AppComponent导出类 {email = new FormControl( '');}
我们没有传递任何可选参数，如同步验证或异步验证，但我们将在向FormControl添加验证时探索这些参数。
在视图上，您可以使用电子邮件FormControl，如下所示:
< 输入 [formControl] = 'email'type = "text"“输入电子邮件” 占位符 = />{{ email.value | json }}
如您所见，我们正在使用属性绑定将formControl电子邮件绑定到视图上的input元素。
步骤4: 使用FormGroup类
FormGroup是一组FormControls。您可以在FormGroup中封装各种FormControls，它提供了一个API:
- 跟踪验证组控件或窗体
- 跟踪一组控件或窗体
的值
它包含子控件作为其属性，它对应于视图上的顶部杠杆形式。可以将FormGroup视为单个对象，该对象聚合子FormControl的值。每个单独的表单控件都是FormGroup对象的属性。
您可以创建一个FormGroup类，如下所示:
loginForm = 新建FormGroup({电子邮件: 新的FormControl( “ ”)，密码: 新FormControl( “ ”)})
这里我们创建了一个登录表单，它是一个FormGroup。它由用于电子邮件和密码的两个表单控件组成。在视图上使用FormGroup非常容易，如下所示:
< form [formGroup] = 'loginForm' novalidate class = "form" >< 输入formControlName = “ 电子邮件”type = "text"class = "form-control"“输入电子邮件” 占位符 = />< 输入formControlName = “ 密码”type = “ 密码”“form-control” 类 =占位符 = "输入密码"/></ 窗体 >{{ loginForm.value | json }}{{ loginForm.status | json }}
在这里，我们使用属性绑定将FormGroup与form和formControlName指令绑定，以将FormControl附加到视图上的特定元素。
如果您使用了模板驱动的表单，您会注意到视图现在更加leaner: 没有附加元素的ngModel或name。您可以使用值和状态属性查找窗体的值和状态。现在，您不再需要使用模板引用变量来查找表单的状态和值。
步骤5: 提交表单
要提交表单，让我们在表单上添加一个提交按钮和一个要调用的函数。我们将修改表单如下:
< 表单 (ngSubmit) = 'loginUser()' [formGroup] = 'loginForm' novalidate class = "form"< input formControlName = 'email' type = "text" class = "form-control" placeholder = "Enter Email" />< input formControlName = 'password' type = "password" class = "form-control" placeholder = "输入密码"< 按钮class = "btn btn-default" 登录 > </ 按钮 ></ form >
在component类中，您可以添加一个函数来提交表单，如下所示:
导出类AppComponent实现OnInit { loginForm: FormGroup;ngOnInit() {这个 .loginForm = 新的FormGroup({电子邮件: 新的FormControl( null ，Validators。必需)，密码: new FormControl()});}loginUser() {console.log( 此 .loginForm.status)；console.log( 此 .loginForm.value)；}}
在这里，我们刚刚添加了一个名为loginUser的函数来处理表单提交事件。在此函数中，您可以使用status和value属性读取FormGroup对象loginForm的值和状态。如您所见，这为您提供了一个对象，该对象聚合了各个表单控件的值。
步骤6: 添加验证
您可能已经注意到，我们没有为表单添加任何验证。让我们从向FormControls添加验证开始。为此，请从 @ angular/forms导入验证器:
ngOnInit() {这个 .loginForm = 新的FormGroup({电子邮件: 新的FormControl( null ，Validators。必需)，密码: new FormControl( null ，[Validators.required，Validators.maxLength(8)])});}
在模板上，可以使用FormGroup get方法查找特定窗体控件中的错误并使用它。在下面的清单中，我们正在检查电子邮件的验证错误并显示错误div。
<div类="警报警告-危险"* ngIf = "loginForm.get('email').hasError('required') & & loginForm.get('email').touched" >电子邮件是必需的</ div >
默认情况下，您还可以禁用提交按钮，并在表单有效以允许提交时启用它。这可以如下面的清单所示:
< 按钮 [已禁用] = 'loginForm. invalid' class = "btn btn-default" > 登录 </ 按钮 >
将所有内容放在一起，具有反应性表单的模板将如下所示:
< div类 = "container" > >< br /><窗体(ngSubmit)='loginUser()'[formGroup]='loginForm'novalidate类="窗体">< input formControlName = 'email' type = "text" class = "form-control" placeholder = "Enter Email" /><div类="警报警告-危险"* ngIf="loginForm.get('email').hasError('required') & & loginForm.get('email').touched">电子邮件是必需的</div>< input formControlName = 'password' type = "password" class = "form-control" placeholder = "输入密码"<div类="警报警告-危险"* ngIf=" !loginForm.get('password')。有效 & & loginForm.get('email')。已触摸">密码是必需的，并且应少于10个字符</div><按钮[已禁用]='loginForm.invalid'类="btn btn-默认">登录</按钮></ 窗体 ></ div >
组件类将如下所示:
从 “@ angular/core” 导入 { Component，OnInit}；从 “@ angular/forms” 导入 { FormGroup，FormControl，FormArray，Validators}；@ Component({'app-root' 选择器，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})AppComponent实现OnInit导出类 { loginForm: FormGroup; ngOnInit() { 这个 .loginForm = 新的FormGroup({电子邮件: 新的FormControl( null ，[Validators.required，Validators.minLength(4)])，密码: new FormControl( null ，[Validators.required，Validators.maxLength(8)])});}loginUser() {console.log( 此 .loginForm.status)；console.log( 此 .loginForm.value)；}}
步骤6: 使用FormBuilder
FormBuilder用于简化FormGroup和FormControl的语法。这是非常有用的，当你的形式变得冗长。Let;s重构loginForm以使用FormBuilder。为此，首先从 @ angular/forms导入FormBuilder。然后将其注入到组件中，如下所示:
构造函数 (私有fb : FormBuilder){ }
您可以使用FormBuilder创建一个反应式表单，如下面的清单所示。如您所见，它简化了语法:
这个。loginForm = 这个。fb.group({电子邮件: [null ，[验证器.必需，验证器.minLength(4)]]，密码: [null ，[Validators.required，Validators.maxLength(8)]] })
模板对于FormBuilder和FormControl类都是相同的。将所有内容放在一起，使用FormBuilder创建响应式表单的组件将如下所示:
从 “@ angular/core” 导入 { Component，OnInit}；从 “@ angular/forms” 导入 { FormGroup，FormControl，FormArray，Validators，FormBuilder}；@ Component({'app-root' 选择器，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})AppComponent实现OnInit导出类 { loginForm: FormGroup; 构造函数 (私有fb: FormBuilder) { }ngOnInit() { 这个 .loginForm = 这个。fb.group({电子邮件: [null ，[验证器.必需，验证器.minLength(4)]]，密码: [null ，[Validators.required，Validators.maxLength(8)]] })} loginUser() {console.log( 此 .loginForm.status)；console.log( 此 .loginForm.value)；}}
喜欢这篇文章？
你有它!如果你喜欢这篇文章，请分享。此外，如果您还没有Infragistics Ignite UI for Angular组件签出，请务必这样做!他们有30个基于材料的Angular组件，可以帮助您更快地编写快速的web应用程序。
</p