如何创建您的第一个 Angular Reactive Form
Posted 哲想软件
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何创建您的第一个 Angular Reactive Form相关的知识，希望对你有一定的参考价值。
接下来，您需要在组件类中导入所需的响应式表单类，例如FormGroup，FormControl，FormArray。我们将使用这些类来构造我们的响应式表单。导入这些类后，组件类应如下所示：
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Reactive Forms Demo';
}
您的组件类可以不同于上面创建的AppComponent，具体取决于您的应用; 不过，在这里我们已经导入了FormGroup，FormControl和FormArray类。 让我们逐一了解这些类：
FormControl类对应于一个单独的表单控件，跟踪它的值和有效性。在创建响应式表单时，您将创建FormControl类的一个对象。FormControl构造函数有三个参数：
1. 初始数据值，可以为空。
2. 同步验证器的数组。 这是一个可选参数。
3. 异步验证器数组。 这是一个可选参数。
在组件类中，您可以创建一个FormControl，如下所示：
export class AppComponent {
email = new FormControl('');
}
我们不会经过任何可选参数，如同步验证或异步验证，但是我们将在向FormControl添加验证的同时探索这些参数。
在视图上，您可以使用电子邮件FormControl，如下所示：
<input [formControl]='email'
type="text"
{{email.value | json}}
如您所见，我们使用属性绑定将formControl电子邮件绑定到视图上的输入元素。
FormGroup是一组FormControl。您可以在FormGroup中封装各种FormControl，它提供一个API用于：
1. 跟踪控件或表单组的验证
2. 跟踪控件组或表单的值
它包含子控件作为它的属性，它对应于视图上的顶部杠杆形式。您可以将FormGroup视为一个单独的对象，该对象聚合了子FormControl的值。每个单独的表单控件是FormGroup对象的属性。
您可以创建一个FormGroup类，如下所示：
loginForm = new FormGroup({
email: new FormControl(' '),
password: new FormControl(' ')
})
这里我们创建了一个登录表单，它是一个FormGroup。它由两个电子邮件和密码的表单控件组成。在视图上使用FormGroup非常容易，如下所示：
<form [formGroup]='loginForm' novalidate class="form">
<input formControlName='email'
type="text"
class="form-control"
<input formControlName='password'
type="password"
class="form-control"
placeholder="Enter Password" />
</form>
{{loginForm.value | json}}
{{loginForm.status | json }}
在这里，我们使用属性绑定来绑定FormGroup与表单和formControlName指令，以将FormControl附加到视图上的某个特定元素。
如果您使用了模板驱动的表单，那么您会注意到现在的视图非常精简：没有ngModel或名称附带元素。您可以通过使用值和状态属性来查找表单的值和状态。 现在，您不再需要使用模板引用变量来查找表单的状态和值。
要提交表单，我们在表单上添加一个提交按钮，并调用一个函数。我们将修改如下的表单：
<form (ngSubmit)='loginUser()' [formGroup]='loginForm' novalidate class="form">
<input formControlName='password' type="password" class="form-control" placeholder="Enter Password" />
<button class="btn btn-default">Login</button>
</form>
在组件类中，可以添加一个函数来提交表单，如下所示：
export class AppComponent implements OnInit {
loginForm: FormGroup;
ngOnInit() {
this.loginForm = new FormGroup({
email: new FormControl(null, Validators.required),
password: new FormControl()
});
}
loginUser() {
console.log(this.loginForm.status);
console.log(this.loginForm.value);
}
}
这里我们刚刚添加了一个名为loginUser的函数来处理表单提交事件。在这个函数里面，你可以使用status和value属性来读取FormGroup对象loginForm的值和状态。正如你所看到的，这给你一个聚合个别表单控件值的对象。
您可能已经注意到我们没有给表单添加任何验证。让我们开始通过向FormControls添加验证。为此，从@ angular / forms导入Validators：
ngOnInit() {
this.loginForm = new FormGroup({
email: new FormControl(null, Validators.required),
password: new FormControl(null, [Validators.required, Validators.maxLength(8)])
});
}
在模板上，可以使用FormGroup get方法在特定的表单控件中查找错误并使用它。如下所示，我们正在检查电子邮件的验证错误并显示错误div。
<div class="alert alert-danger"
*ngIf="loginForm.get('email').hasError('required') && loginForm.get('email').touched">
</div>
您也可以在默认情况下禁用您的提交按钮，并在表单有效以允许提交时启用它。 这可以按照下面所示完成：
<button [disabled]='loginForm.invalid' class="btn btn-default">Login</button>
将所有内容放在一起，具有响应式表单的模板将如下所示：
<div class="container">
<br />
<form (ngSubmit)='loginUser()' [formGroup]='loginForm' novalidate class="form">
<div class="alert alert-danger" *ngIf="loginForm.get('email').hasError('required') && loginForm.get('email').touched">
</div>
<input formControlName='password' type="password" class="form-control" placeholder="Enter Password" />
<div class="alert alert-danger" *ngIf=" !loginForm.get('password').valid && loginForm.get('email').touched">
Password is required and should less than 10 characters
</div>
<button [disabled]='loginForm.invalid' class="btn btn-default">Login</button>
</form>
</div>
组件类将如下所示：
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
loginForm: FormGroup;
ngOnInit() {
this.loginForm = new FormGroup({
email: new FormControl(null, [Validators.required, Validators.minLength(4)]),
password: new FormControl(null, [Validators.required, Validators.maxLength(8)])
});
}
loginUser() {
console.log(this.loginForm.status);
console.log(this.loginForm.value);
}
}
FormBuilder用于简化FormGroup和FormControl的语法。当你的表单变得冗长时，这是非常有用的。让我们重构loginForm以使用FormBuilder。为此，首先从@ angular / forms导入FormBuilder。 然后将其注入组件，如下所示：
constructor(private fb : FormBuilder){
}
您可以使用FormBuilder创建一个响应式表单，如下所示。 如您所见，它简化了语法：
this.loginForm = this.fb.group({
email: [null, [Validators.required, Validators.minLength(4)]],
password: [null, [Validators.required, Validators.maxLength(8)]]
})
FormBuilder和FormControl类的模板都是一样的。把所有东西放在一起，使用FormBuilder创建一个响应式表单的组件将如下所示：
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray, Validators, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
loginForm: FormGroup;
constructor(private fb: FormBuilder) {
}
ngOnInit() {
this.loginForm = this.fb.group({
email: [null, [Validators.required, Validators.minLength(4)]],
password: [null, [Validators.required, Validators.maxLength(8)]]
})
}
loginUser() {
console.log(this.loginForm.status);
console.log(this.loginForm.value);
}
}
这就是这篇文章！如果你喜欢这个帖子，请分享。另外，如果您还没有去了解Infragistics Ignite UI for Angular Components，请一定要去！他们有30多种基于材料的Angular组件，可以帮助您更快地编写快速的Web应用程序。
公司名称：哲想方案（北京）科技有限公司
北京哲想软件官方网站：www.cogitosoft.com
北京哲想软件微信公众平台账号：cogitosoftware
北京哲想软件微博：哲想软件
联系方式：+86（10）68421378
俞先生：18610247936
以上是关于如何创建您的第一个 Angular Reactive Form的主要内容，如果未能解决你的问题，请参考以下文章
为啥我应该在构造函数而不是 ngOnInit 中创建我的 Angular2 响应式表单？