AngularReactiveForm使用一种显式的、不可变的方式来管理特定时间点的表单状态。对表单状态的每次更改都会返回一个新状态，从而保持模型在更改过程中的完整性。响应式表单是围绕Observable流构建的。表单输入和值通过这些输入值的流提供，可以同步访问。响应式表单通过对数据模型的同步访问、使用Observable运算符的不变性以及通过Observable流的更改跟踪提供更多的可预测性。要使用响应式表单控件，请从@angular/forms包中导入ReactiveFormsModule并将其添加到NgModule的导入数组中。从'@angular/forms'导入{ReactiveFormsModule}；然后，生成一个新的FormControl实例并将其保存在组件中。要注册一个表单控件，导入FormControl类并创建一个新的FormControl实例，将其保存为该类的一个属性。从'@angular/core'导入{Component};从'@angular/forms'导入{FormControl};@Component（{选择器：'app-name-editor'，templateUrl：'./name-editor.component.html',styleUrls:['./name-editor.component.css']})exportclassNameEditorComponent{name=newFormControl('');}通过在你的组件类中创建这些控件，你可以直接编辑表单控件Monitor，修改和验证系统的状态。到目前为止，我们只是在Component内部创建了一个FormControl并将其分配给Component类的一个实例。但是，组件模板并不知道这个FormControl。我们需要修改Component模板文件，将模板中的控件绑定到ComponentFormControl实例。名称：绑定语法：[formControl]=""使用此模板绑定语法，表单控件注册到模板中名为name的输入元素。这样，表单控件和DOM元素就可以相互通信：视图将反映模型的变化，而模型将反映视图的变化。这种沟通是双向的。有时在实际开发中，我们也可以看到FormGroup的使用示例：FormGroup是一个表单组，它定义了一个表单和一组控件，你可以将它们集中管理。正如FormControl的实例可以让您控制与单个输入字段对应的控件一样，FormGroup的实例会跟踪一组FormControl实例（例如表单）的表单状态。创建FormGroup时，其中的每个控件都按其名称进行跟踪。看一个创建FormGroup的例子：import{Component}from'@angular/core';从'@angular/forms'导入{FormGroup，FormControl}；@Component({selector:'app-profile-editor',templateUrl:'./profile-editor.component.html',styleUrls:['./profile-editor.component.css']})exportclassProfileEditorComponent{profileForm=newFormGroup({firstName:newFormControl(''),lastName:newFormControl(''),});}这些单独的表单控件现在被收集到一个控件组中。FormGroup提供其模型值作为组中每个控件的值的对象。FormGroup实例具有与FormControl实例相同的属性（如值、未修改）和方法（如setValue()）。我们仍然需要将这个FormGroup实例链接到模板文件。该表单组还可以跟踪每个控件的状态和变化，因此如果其中一个控件的状态或值发生变化，父控件也会发出新的状态变化或值变化事件。对照组的模型来自其所有成员。定义模型后，必须更新模板以在视图中反映模型。名字：LastName:注意就像FormGroup中包含的控件一样，profileForm这个FormGroup也通过FormGroup指令绑定到表单元素，在模型和表单中的输入框之间创建一个通信层。FormControlName指令提供的formControlName属性将每个输入框绑定到FormGroup中定义的表单控件。这些表单控件与相应的元素进行通信，它们还将更改传递给FormGroup，这是模型值的真实来源。当然，在实际开发中还有另一种实现方式：先创建一个空的FormGroup，然后通过setControl将后面创建的FormControl实例设置到formGroup中。protectedbuildForm(){constform=newFormGroup({});form.setControl('product',newFormControl(null));this.form=表格；}模板文件实现：更多杰瑞原创文章在这里：《汪子熙》：
