angular 7表单

本文概述

角形用于处理用户的输入。我们可以在应用程序中使用Angular表单来使用户登录,更新配置文件,输入信息并执行许多其他数据输入任务。

在Angular 7中,有两种方法可以通过表单来处理用户的输入:

  • 交互表单
  • 模板驱动的表格

两种方法都用于从视图中收集用户输入事件,验证用户输入,创建要更新的表单模型和数据模型以及提供跟踪更改的方法。

交互表单与模板驱动的表单

交互性表单和模板驱动的表单都以不同的方式管理和处理数据。每个都有不同的优势。

交互表单

  • 交互表单更可靠。
  • 交互性表单更具可伸缩性,可重用性和可测试性。
  • 如果表单是应用程序的关键部分,或者你的应用程序已经使用响应模式构建,则最适合使用它们。在这两种情况下,最好使用交互表单。

模板驱动的表单

  • 如果要向应用程序中添加简单表单,则模板驱动表单是最好的。例如:电子邮件列表注册表单。
  • 模板驱动的表单易于在应用程序中使用,但不像交互ive表单那样可伸缩。
  • 如果你的应用程序需要非常基本的表单和逻辑,则主要使用模板驱动的表单。可以轻松地在模板中对其进行管理。

交互表单和模板驱动表单之间的区别

比较指标 交互表单 模板驱动的表单
Setup (form model) 交互表单更为明确。它们在组件类中创建。 模板驱动的表单不太明确。它们是由指令创建的。
Data model 结构化的 非结构化
Predictability 同步 异步
Form validation 功能 指令
Mutability 一成不变的 可变的
Scalability 低级API访问 API之上的抽象

交互表单和模板驱动表单之间的相似性

交互式和模板驱动表单共享一些构建基块:

  • FormControl:用于跟踪单个表单控件的值和验证状态。
  • FormGroup:用于跟踪表单控件集合的相同值和状态。
  • FormArray:用于跟踪表单控件数组的相同值和状态。
  • ControlValueAccessor:用于在Angular FormControl实例和本机DOM元素之间创建桥梁。

表格模型设置

表单模型设置用于跟踪Angular表单和表单输入元素之间的值更改。让我们来看一个示例,看看如何定义和创建表单模型。

响应式表单中的表单模型设置

有关使用交互式表单实现的单个控件,请参见以下带有输入字段的组件。

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
  selector: 'app-交互ive-favorite-color', template: `
    Favorite Color: <input type="text" [formControl]="favoriteColorControl"> `
})
export class FavoriteColorComponent {
  favoriteColorControl = new FormControl('');
}

在交互表单中,表单模型是真理的源头。真理的来源提供了表单元素在给定时间点的价值和地位。

在上面的示例中,表单模型是FormControl实例。

在交互表单中,表单模型在组件类中明确定义。之后,交互式表单指令(此处为:FormControlDirective)使用值访问器(ControlValueAccessor实例)将现有FormControl实例链接到视图中的特定表单元素。

模板驱动的表单中的表单模型设置

请参阅与上述相同的组件,以及使用模板驱动的表单实现的单个控件的输入字段。

import { Component } from '@angular/core';
@Component({
  selector: 'app-template-favorite-color', template: `
    Favorite Color: <input type="text" [(ngModel)]="favoriteColor"> `
})
export class FavoriteColorComponent {
  favoriteColor = '';
}

在模板驱动的表单中,真理的来源是模板本身。

表单模型抽象可简化结构。模板驱动的表单指令NgModel为给定的表单元素创建和管理FormControl实例。它不太明确,但是删除了对表单模型的直接控制。


微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?