响应式Form Angular Form 学习笔记 _form

响应式表单使用显式的、不可变的方式，管理表单在特定的时间点上的状态。对表单状态的每一次变更都会返回一个新的状态，这样可以在变化时维护模型的整体性。响应式表单是围绕流构建的，表单的输入和值都是通过这些输入值组成的流来提供的，它可以同步访问。
响应式表单通过对数据模型的同步访问提供了更多的可预测性，使用的操作符提供了不可变性，并且通过流提供了变化追踪功能。
要使用响应式表单控件，就要从 @/forms 包中导入，并把它添加到你的的数组中。
【响应式FormAngular Form学习笔记】import { ReactiveFormsModule } from '@angular/forms';
然后，生成一个新的实例，并把它保存在组件中。
要注册一个表单控件，就要导入类并创建一个的新实例，将其保存为类的属性。
import { Component } from '@angular/core';import { FormControl } from '@angular/forms';@Component({selector: 'app-name-editor',templateUrl: './name-editor.component.html',styleUrls: ['./name-editor.component.css']})export class NameEditorComponent {name = new FormControl('');}
通过在你的组件类中创建这些控件，你可以直接对表单控件的状态进行监听、修改和校验。
到现在为止，我们只是在里创建了一个并把它赋给类的实例。但是，的模板还感知不到这个 .
我们需要修改模板文件，将模板里某个控件同实例绑定起来。
Name:
绑定的语法：
[formControl]=""
使用这种模板绑定语法，把该表单控件注册给了模板中名为 name 的输入元素。这样，表单控件和 DOM 元素就可以互相通讯了：视图会反映模型的变化，模型也会反映视图中的变化。
这个通信是双向的。
有时在实际开发中，我们还能看到的使用例子：
Form Group 即表单组，定义了一个带有一组控件的表单，你可以把它们放在一起管理。
就像的实例能让你控制单个输入框所对应的控件一样，的实例也能跟踪一组实例（比如一个表单）的表单状态。当创建时，其中的每个控件都会根据其名字进行跟踪。
看一个创建例子：
import { Component } from '@angular/core';import { FormGroup, FormControl } from '@angular/forms';@Component({selector: 'app-profile-editor',templateUrl: './profile-editor.component.html',styleUrls: ['./profile-editor.component.css']})export class ProfileEditorComponent {profileForm = new FormGroup({firstName: new FormControl(''),lastName: new FormControl(''),});}
现在，这些独立的表单控件被收集到了一个控件组中。这个用对象的形式提供了它的模型值，这个值来自组中每个控件的值。实例拥有和实例相同的属性（比如 value、）和方法（比如 ()）。
我们仍需将这个实例关联到模板文件里。

文章插图
这个表单组还能跟踪其中每个控件的状态及其变化，所以如果其中的某个控件的状态或值变化了，父控件也会发出一次新的状态变更或值变更事件。该控件组的模型来自它的所有成员。在定义了这个模型之后，你必须更新模板，来把该模型反映到视图中。