11.2.7 - FormBuilder

• 创建表单的快捷方式
• this.fb.control：表单项
• this.fb.group：表单组，表单至少是一个 FormGroup
• this.fb.array：用于复杂表单，可以动态添加表单项或表单组，在表单验证时，FormArray 中有一项没通过，整体没通过 ```typescript import { Component, OnInit } from ‘@angular/core’; import { FormBuilder, FormGroup, Validators } from ‘@angular/forms’;

@Component({ selector: ‘app-form-builder’, templateUrl: ‘./form-builder.component.html’, styleUrls: [‘./form-builder.component.scss’] })

export class FormBuilderComponent implements OnInit { contactForm: FormGroup constructor(private fb: FormBuilder) { this.contactForm = this.fb.group({ fullName: this.fb.group({ firstName: [“默认值”, [Validators.required]], lastName: [“”] }), phone: [] }) } }

```typescript
<form [formGroup]="contactForm" (submit)="onSubmit()">
    <div formGroupName="fullName">
        <input type="text" formControlName="firstName">
        <input type="text" formControlName="lastName">
    </div>
    <button>提交</button>
</form>