广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

本篇文章带大家了解一下angular中的表单，聊聊响应式表单与模板驱动表单，介绍一下响应式表单怎么验证表单输入，希望对大家有所帮助！

Angular 提供了两种不同的方法来通过表单处理用户输入：响应式表单和模板驱动表单。 两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型，并提供跟踪这些更改的途径。【相关教程推荐：《angular教程》】

响应式表单和模板驱动型表单都会跟踪用户与之交互的表单输入元素和组件模型中的表单数据之间的值变更。这两种方法共享同一套底层构建块，只在如何创建和管理常用表单控件实例方面有所不同。

响应式表单和模板驱动表单都建立在下列基础类之上。

响应式表单使用显式的、不可变的方式，管理表单在特定的时间点上的状态。对表单状态的每一次变更都会返回一个新的状态，这样可以在变化时维护模型的整体性。响应式表单是围绕 Observable 流构建的，表单的输入和值都是通过这些输入值组成的流来提供的，它可以同步访问。

使用表单控件有三个步骤。

在你的应用中注册响应式表单模块。该模块声明了一些你要用在响应式表单中的指令。

生成一个新的 FormControl 实例，并把它保存在组件中。

在模板中注册这个 FormControl。

要使用响应式表单控件，就要从 @angular/forms 包中导入 ReactiveFormsModule，并把它添加到你的 NgModule 的 imports 数组中。

import { ReactiveFormsModule } from '@angular/forms';@NgModule({  imports: [    // other imports ...    ReactiveFormsModule  ],})export class AppModule { }

要注册一个表单控件，就要导入 FormControl 类并创建一个 FormControl 的新实例，将其保存为类的属性。

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('');}

可以用 FormControl 的构造函数设置初始值，这个例子中它是空字符串。通过在你的组件类中创建这些控件，你可以直接对表单控件的状态进行监听、修改和校验。

在组件类中创建了控件之后，你还要把它和模板中的一个表单控件关联起来。修改模板，为表单控件添加 formControl 绑定，formControl 是由 ReactiveFormsModule 中的 FormControlDirective 提供的。

<label>  Name:  <input type="text" [formControl]="name"></label>

你可以用下列方式显示它的值：

<label>  Name:  <input type="text" [formControl]="name"></label><p>Value: {{ name.value }}</p>

  public name = new FormControl('test');  public testValueChange() {    this.name.valueChanges.subscribe({      next: value => {        console.log("name value is: " + value);      }    })  }

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

updateName() {  this.name.setValue('Nancy' + new Date().getTime());}

<p>  <button (click)="updateName()">Update Name</button></p>

表单中通常会包含几个相互关联的控件。响应式表单提供了两种把多个相关控件分组到同一个输入表单中的方法。

要将表单组添加到此组件中，请执行以下步骤。

创建一个 FormGroup 实例。

把这个 FormGroup 模型关联到视图。

保存表单数据。

在组件类中创建一个名叫 profileForm 的属性，并设置为 FormGroup 的一个新实例。要初始化这个 FormGroup，请为构造函数提供一个由控件组成的对象，对象中的每个名字都要和表单控件的名字一一对应。

import { FormControl, FormGroup } from '@angular/forms';  profileForm = new FormGroup({    firstName: new FormControl(''),    lastName: new FormControl(''),  });  // 可以整个获取值  public onSubmit() {    // TODO: Use EventEmitter with form value    console.warn(this.profileForm.value);// {firstName: "", lastName: ""}  }      // 可以借助 valueChanges 整个可观察对象整个获取值     this.profileForm.valueChanges.subscribe( {      next: value => {        console.log("name value is: " + JSON.stringify(value)); // dashboard.component.ts:53 name value is: {"firstName":"dddd","lastName":"bb"}      }    })    // 可以通过后期单个控件单独获取值    this.profileForm.get('firstName').valueChanges.subscribe({      next: value => {        console.log("First Name is: " + value); // First Name is: aa      }

ps: 这个 FormGroup 用对象的形式提供了它的模型值，这个值来自组中每个控件的值。 FormGroup 实例拥有和 FormControl 实例相同的属性（比如 value、untouched）和方法（比如 setValue()）。

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

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">   <label>    First Name:    <input type="text" formControlName="firstName">  </label>  <label>    Last Name:    <input type="text" formControlName="lastName">  </label>  <button type="submit" [disabled]="!profileForm.valid">Submit</button></form>

表单组可以同时接受单个表单控件实例和其它表单组实例作为其子控件。这可以让复杂的表单模型更容易维护，并在逻辑上把它们分组到一起。 要制作更复杂的表单，请遵循如下步骤。

创建一个嵌套的表单组

板中对这个嵌套表单分组。

要在 profileForm 中创建一个嵌套组，就要把一个嵌套的 address 元素添加到此表单组的实例中。

  public profileForm = new FormGroup({    firstName: new FormControl(''),    lastName: new FormControl(''),    address: new FormGroup({      street: new FormControl(''),      city: new FormControl(''),      state: new FormControl(''),      zip: new FormControl('')    })  });    // 可以借助 valueChanges 整个可观察对象整个获取值    this.profileForm.valueChanges.subscribe( {      next: value => {        console.log("name value is: " + JSON.stringify(value));// name value is: {"firstName":"","lastName":"","address":{"street":"b","city":"","state":"","zip":""}}      }    });    // 可以通过后期单个控件单独获取值    this.profileForm.get('firstName').valueChanges.subscribe({      next: value => {        console.log("First Name is: " + value);      }    });    // 可以获取form组件某个form组的整个值    this.profileForm.get('address').valueChanges.subscribe(({      next: value => {        console.log('address value is: ' + JSON.stringify(value));// address value is: {"street":"b","city":"","state":"","zip":""}      }    }));    // 可以获取form组件某个form组的某个formcontrol实例的值    this.profileForm.get('address').get('street').valueChanges.subscribe(({      next: value => {        console.log('street value is: ' + value);// street value is: b      }    }));

在修改了组件类中的模型之后，还要修改模板，来把这个 FormGroup 实例对接到它的输入元素。

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('');}0

当修改包含多个 FormGroup 实例的值时，你可能只希望更新模型中的一部分，而不是完全替换掉。

有两种更新模型值的方式：

setValue() 方法的严格检查可以帮助你捕获复杂表单嵌套中的错误，而 patchValue() 在遇到那些错误时可能会默默的失败。

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('');}1

FormArray 是 FormGroup 之外的另一个选择，用于管理任意数量的匿名控件。像 FormGroup 实例一样，你也可以往 FormArray 中动态插入和移除控件，并且 FormArray 实例的值和验证状态也是根据它的子控件计算得来的。 不过，你不需要为每个控件定义一个名字作为 key，因此，如果你事先不知道子控件的数量，这就是一个很好的选择。

要定义一个动态表单，请执行以下步骤。

导入 FormArray 类。

定义一个 FormArray 控件。

使用 getter 方法访问 FormArray 控件。

在模板中显示这个表单数组

通过把一组（从零项到多项）控件定义在一个数组中来初始化一个 FormArray。为 profileForm 添加一个 aliases 属性，把它定义为 FormArray 类型。

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('');}2

要想为表单模型添加 aliases，你必须把它加入到模板中供用户输入。和 FormGroupNameDirective 提供的 formGroupName 一样，FormArrayNameDirective 也使用 formArrayName 在这个 FormArray 实例和模板之间建立绑定

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('');}3

在模板驱动表单中，表单模型是隐式的，而不是显式的。指令 NgModel 为指定的表单元素创建并管理一个 FormControl 实例。 下面的组件使用模板驱动表单为单个控件实现了同样的输入字段。

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('');}4

在组件类中直接把验证器函数添加到表单控件模型上（FormControl）。然后，一旦控件发生了变化，Angular 就会调用这些函数。

验证器函数可以是同步函数，也可以是异步函数。

出于性能方面的考虑，只有在所有同步验证器都通过之后，Angular 才会运行异步验证器。当每一个异步验证器都执行完之后，才会设置这些验证错误。

在模板驱动表单中用作属性的那些内置验证器，比如 required 和 minlength，也都可以作为 Validators 类中的函数使用

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('');}5

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('');}6

内置的验证器并不是总能精确匹配应用中的用例，因此有时你需要创建一个自定义验证器。

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('');}7

跨字段交叉验证器是一种自定义验证器，可以对表单中不同字段的值进行比较，并针对它们的组合进行接受或拒绝。

下列交叉验证的例子说明了如何进行如下操作：

要想在单个自定义验证器中计算这两个控件，你就必须在它们共同的祖先控件中执行验证： FormGroup。你可以在 FormGroup 中查询它的子控件，从而让你能比较它们的值。要想给 FormGroup 添加验证器，就要在创建时把一个新的验证器传给它的第二个参数。

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('');}8

异步验证器实现了 AsyncValidatorFn 和 AsyncValidator 接口。它们与其同步版本非常相似，但有以下不同之处。

异步验证在同步验证完成后才会发生，并且只有在同步验证成功时才会执行。如果更基本的验证方法已经发现了无效输入，那么这种检查顺序就可以让表单避免使用昂贵的异步验证流程（例如 HTTP 请求）。

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('');}9

更多编程相关知识，请访问：编程视频！！

以上就是深入了解angular中的表单（响应式和模板驱动）的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~