<form novalidate [formGroup]="user"> <label> <span>Full name</span> <input type="text" placeholder="Your full name" formControlName="name"> </label> <div formGroupName="account"> <label> <span>Email address</span> <input type="email" placeholder="Your email address" formControlName="email"> </label> <label> <span>Confirm address</span> <input type="email" placeholder="Confirm your email address" formControlName="confirm"> </label> </div> <button type="submit">Sign up</button> </form>
现在 FormGroup 与 FormControl 对象与 DOM 结构的关联信息如下：
// JavaScript APIs FormGroup -> 'user' FormControl -> 'name' FormGroup -> 'account' FormControl -> 'email' FormControl -> 'confirm' // DOM bindings formGroup -> 'user' formControlName -> 'name' formGroupName -> 'account' formControlName -> 'email' formControlName -> 'confirm'
当使用模板驱动的表单时，为了获取 f.value 表单的值，我们需要先执行 #f="ngForm" 的操作。而对于使用响应式的表单，我们可以通过以下方式，方便的获取表单的值：
{{ user.value | json }} // { name: '', account: { email: '', confirm: '' }}
Reactive submit
跟模板驱动的表单一样，我们可以通过 ngSubmit 输出属性，处理表单的提交逻辑：
<form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user"> ... </form>
需要注意的是：我们使用 user 对象作为 onSubmit() 方法的参数，这使得我们可以获取表单对象的相关信息，具体处理逻辑如下：
export class SignupFormComponent { user: FormGroup; onSubmit({ value, valid }: { value: User, valid: boolean }) { console.log(value, valid); } }
上面代码中，我们使用 Object destructuring (对象解构) 的方式，从user 对象中获取 value 和 valid 属性的值。其中 value 的值，就是 user.value 的值。在实际应用中，我们是不需要传递 user 参数的：
export class SignupFormComponent { user: FormGroup; onSubmit() { console.log(this.user.value, this.user.valid); } }
表单的数据绑定方式和提交逻辑已经介绍完了，是该介绍表单实际应用中，一个重要的环节 — 表单验证。
Reactive error validation
接下来我们来为表单添加验证规则，首先我们需要从 @angular/forms 中导入 Validators。具体使用示例如下：
ngOnInit() { this.user = new FormGroup({ name: new FormControl('', [Validators.required, Validators.minLength(2)]), account: new FormGroup({ email: new FormControl('', Validators.required), confirm: new FormControl('', Validators.required) }) }); }
通过以上示例，我们可以看出，如果表单控制包含多种验证规则，可以使用数组声明多种验证规则。若只包含一种验证规则，直接声明就好。通过这种方式，我们就不需要在模板的输入控件中添加 required 属性。接下来我们来添加表单验证失败时，不允许进行表单提交功能：
<form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user"> ... <button type="submit" [disabled]="user.invalid">Sign up</button> </form>
那么问题来了，我们要如何获取表单控件的验证信息？我们可以使用模板驱动表单中介绍的方式，具体如下：
<form novalidate [formGroup]="user"> {{ user.controls.name?.errors | json }} </form>
友情提示： ?.prop 称为安全导航操作符，用于告诉 Angular prop 的值可能不存在。
此外我们也可以使用 FormGroup 对象提供的 API，来获取表单控件验证的错误信息：
<form novalidate [formGroup]="user"> {{ user.get('name').errors | json }} </form>
现在我们来看一下完整的代码：
import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms'; import { User } from './signup.interface'; @Component({ selector: 'signup-form', template: ` <form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user"> <label> <span>Full name</span> <input type="text" placeholder="Your full name" formControlName="name"> </label> <div *ngIf="user.get('name').hasError('required') && user.get('name').touched"> Name is required </div> <div *ngIf="user.get('name').hasError('minlength') && user.get('name').touched"> Minimum of 2 characters </div> <div formGroupName="account"> <label> <span>Email address</span> <input type="email" placeholder="Your email address" formControlName="email"> </label> <div *ngIf="user.get('account').get('email').hasError('required') && user.get('account').get('email').touched"> Email is required </div> <label> <span>Confirm address</span> <input type="email" placeholder="Confirm your email address" formControlName="confirm"> </label> <div *ngIf="user.get('account').get('confirm').hasError('required') && user.get('account').get('confirm').touched"> Confirming email is required </div> </div> <button type="submit" [disabled]="user.invalid">Sign up</button> </form> ` }) export class SignupFormComponent implements OnInit { user: FormGroup; constructor() {} ngOnInit() { this.user = new FormGroup({ name: new FormControl('', [Validators.required, Validators.minLength(2)]), account: new FormGroup({ email: new FormControl('', Validators.required), confirm: new FormControl('', Validators.required) }) }); } onSubmit({ value, valid }: { value: User, valid: boolean }) { console.log(value, valid); } }
功能是实现了，但创建 FormGroup 对象的方式有点繁琐，Angular 团队也意识到这点，因此为我们提供 FormBuilder ，来简化上面的操作。
Simplifying with FormBuilder
首先我们需要从 @angular/forms 中导入 FormBuilder：