今天完成的事情：

今天完成完成了判断新增页面和编辑页面，并把新增页面编辑好了

明天计划的事情：

遇到的问题：

昨天的问题还是没有解决。。。

收获：

angular表单提交：（这里主要学习了响应式表单的使用后面配合ng-zorro来使用）

响应式表单和模板驱动表单共享了一些底层构造块。

FormControl 实例用于追踪单个表单控件的值和验证状态。

FormGroup 用于追踪一个表单控件组的值和状态。

FormArray 用于追踪表单控件数组的值和状态。

ControlValueAccessor 用于在 Angular 的 FormControl 实例和原生 DOM 元素之间创建一个桥梁。

对于响应式表单，每当控件值变化时，FormControl 实例就会返回一个新的值。

响应式表单通过提供对底层 API 的访问和对表单模型的同步访问，让创建大型表单更轻松。

替换表单控件的值

响应式表单还有一些方法可以用编程的方式修改控件的值，它让你可以灵活的修改控件的值而不需要借助用户交互。FormControl 提供了一个 setValue() 方法，它会修改这个表单控件的值，并且验证与控件结构相对应的值的结构。比如，当从后端 API 或服务接收到了表单数据时，可以通过 setValue() 方法来把原来的值替换为新的值

把表单控件分组

就像 FormControl 的实例能让你控制单个输入框所对应的控件一样，FormGroup 的实例也能跟踪一组 FormControl 实例（比如一个表单）的表单状态。当创建 FormGroup 时，其中的每个控件都会根据其名字进行跟踪。

FormGroup 实例拥有和 FormControl 实例相同的属性（比如 value、untouched）和方法（比如 setValue()）。

form 标签所发出的 submit 事件是原生 DOM 事件，通过点击类型为 submit 的按钮可以触发本事件。这还让用户可以用回车键来提交填完的表单。

使用 FormBuilder 来生成表单控件

当需要与多个表单打交道时，手动创建多个表单控件实例会非常繁琐。FormBuilder 服务提供了一些便捷方法来生成表单控件。FormBuilder 在幕后也使用同样的方式来创建和返回这些实例，只是用起来更简单。

使用步骤：

1、 导入 FormBuilder 类     import { FormBuilder } from '@angular/forms';

2、 注入 FormBuilder 服务         constructor(private fb: FormBuilder) { }

3、 生成表单控件

用 group 方法来创建 profileForm 控件。

例子：

 profileForm = this.fb.group({

    firstName: [''],

    lastName: [''],

    address: this.fb.group({

      street: [''],

      city: [''],

      state: [''],

      zip: ['']

    }),

  });

  constructor(private fb: FormBuilder) { }

表单验证

验证器函数

有两种验证器函数：同步验证器和异步验证器。

同步验证器函数接受一个控件实例，然后返回一组验证错误或 null。你可以在实例化一个 FormControl 时把它作为构造函数的第二个参数传进去。

异步验证器函数接受一个控件实例，并返回一个承诺（Promise）或可观察对象（Observable），它们稍后会发出一组验证错误或者 null。你可以在实例化一个 FormControl 时把它作为构造函数的第三个参数传进去。

验证器就是一个函数，它可以处理单个 FormControl 或一组控件，并返回一个错误映射表（map）或 null。null 表示验证已通过了。

Validators

提供一组内置验证器，可用于各种表单控件。如下：

使用ng-zorro的表单组件用起来很方便，首先在引入ng-zorro组件之后

ts中声明FormGroup

validateForm: FormGroup;

ngOnInit() {

[Validators.required] 为必填项

后面ngOnInit是初始化表单中数据