8、使用响应式表单构建应用及优化实践

使用响应式表单构建应用及优化实践

1. 响应式表单构建库存应用

在构建库存应用时，响应式表单是一个强大的工具。我们可以通过它来创建复杂的表单，并添加各种验证规则。

1.1 添加内置和自定义验证

验证是表单的重要组成部分，响应式表单使验证管理更加容易。我们从为基本信息表单添加验证开始。

首先，为产品名称输入字段添加必填验证。在响应式表单中，验证应添加到组件类而不是模板中：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
...
export class ProductComponent implements OnInit {
    ...
    constructor(private fb: FormBuilder) {
        this.productForm = fb.group({
            basic: fb.group({
                name: ['', Validators.required],
                description: '',
                active: false,
                features: fb.array([
                    fb.control('')
                ])
            }),
            expiration: fb.group({