当前位置：首页 > 编程日记 > 正文

Angular响应式表单及表单验证

编程日记 2024-05-31 07:00:00

1. 什么是响应式表单？

响应式表单提供了一种模型驱动的方式来处理表单输入，其中的值会随时间而变化。

响应式表单使用显示的，不可变的方式，管理表单在特定时间点上的状态。对表单状态的每一次变更都会返回一个新的状态，这样可以在变化时维护模型的整体性。

—— Angular文档

2. 响应式表单的使用

2.1 单个表单控件

FormControl的实例可以跟踪独立表单控件的值和验证状态。

2.1.1 使用步骤(示例)

步骤1: 在module.ts中导入ReactiveFormsModule模块¹。

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

步骤2: 在组件类导入FormControl类²，并创建一个FormControl实例。

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms'; // 导入FormControl@Component({selector: 'app-welcome',templateUrl: './welcome.component.html',styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {// 创建FormControl实例name = new FormControl('');constructor() { }ngOnInit() {}}

步骤3: 在模板中注入该控件

<label>FormControl测试:<input nz-input [formControl]="name" placeholder="输入测试信息">
</label>
<label>输入的测试信息为:{{name.value}}
</label>

若想设置表单控件的值，可以使用FormControl提供的 setValue() 方法。

2.2 表单控件分组

FormGroup实例可以跟踪一组 FormControl 实例的值和有效性状态。
当创建FormGroup时，其中的每一个控件都会根据其名字进行跟踪。

2.2.1 使用步骤(示例)

步骤1：创建FormGroup实例

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms'; // 导入FormControl和FormGroup类@Component({selector: 'app-profile-editor',templateUrl: './profile-editor.component.html',styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {// 创建FromGroup实例profileForm = new FormGroup({firstName: new FormControl(''),lastName: new FormControl(''),});
}

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

步骤2：关联FormGroup的模型与视图
这个表单组跟踪其中每个控件的状态和值变化，所以如果其中的某个控件的状态或值变化了，父控件会发出一次新的状态变更或值变更事件。

该控件组的模型来自于它的所有成员。在定义了这个模型之后，必须更新模板，来把该模型反映到视图中。

<form [formGroup]="profileForm"><label>First Name:<input type="text" formControlName="firstName"></label><label>Last Name:<input type="text" formControlName="lastName"></label></form>

解释：

模型中创建的FormGroup实例通过FromGroup指令绑定到form元素上，在该模型和表单中的输入框之间创建一个通讯层。

由FormControlName指令提供的formControlName属性把每个输入框和FormGroup中定义的表单控件绑定起来。这些表单控件会和相应的元素通讯，它们还把更改传递给FormGroup，这个FormGroup是模型值的权威数据源。

2.2.2 保存表单数据

组件从用户那里获得输入，但在真实的场景中，你可能想要先捕获表单的值，等将来在组件外部进行处理。

FormGroup 指令会监听 form 元素发出的 submit 事件，并发出一个 ngSubmit 事件，用来绑定一个回调函数。

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">

组件类中的onSubmit()方法会捕获FromGroup示例(这里即profileForm)的当前值。

要保持该表单的封装性，就要使用EventEmitter向组件外部提供该表单的值。

获取表单的值用：this.profileForm.value

form 标签所发出的 submit 事件是原生 DOM 事件，通过点击类型为 submit 的按钮可以触发本事件。

<button type="submit">Submit</button>

2.3 使用FormBuilder来生成表单控件

2.3.1 使用步骤(示例)

步骤1: 导入FormBuilder类

import { FormBuilder } from '@angular/forms';

步骤2: 注入FormBuilder服务

constructor(private fb: FormBuilder) { }

步骤3: 生成表单控件

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';@Component({selector: 'app-profile-editor',templateUrl: './profile-editor.component.html',styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {profileForm = this.fb.group({firstName: [''],lastName: [''],address: this.fb.group({street: [''],city: [''],state: [''],zip: ['']}),});constructor(private fb: FormBuilder) { }
}

注意：这里使用group()方法来定义属性，每个控件名对应的值都是一个数组，这个数组中的第一项是其初始值，第二项和第三项提供同步和异步验证器。

在上面的描述中，已经为表单创建了表单控件，下面结合验证器来进行表单验证。

2.4 表单验证

响应式表单包含了一组开箱即用的常用验证器函数。这些函数接收一个控件，用以验证并根据验证结果返回一个错误对象或空值。

步骤1： 创建表单控件
步骤2： 导入 验证器函数

import { Validators } from '@angular/forms';

步骤3： 添加验证器静态方法
将验证器静态方法设置为表单控件值数组的第二项。

验证器静态方法如下：

Validators.min(n)：该验证器要求控件值最小值为n(n为数字)。
Validators.max(n)：该验证器要求控件值最大值为n(n为数字)。
Validators.required：该验证器要求控件具有非空值，即该控件所表示的字段必填。
Validators.minLength(n)：该验证器要求控件值的最小长度为n(n为数字)。
Validators.maxLength(n)：该验证器要求控件值的最大长度为n(n为数字)。
……

详细的验证器静态方法请查阅 官方文档-Validators。

ReactiveFormsModule包含响应式表单所需要的基本设施和指令。 ↩︎
当使用响应式表单时，FormControl 类是最基本的构造块，它能跟踪独立表单控件的值和验证状态。 ↩︎

https://www.dkcj.cn/info/8622.html

void *指针的加减运算

1、手工写了一个程序验证void *指针加减运算移动几个字节： //本程序验证空类型指针减1移动几个字节 #include <stdio.h> int main(int argc, char *argv[]) {int a10,b20;int *pa&a;void …

编程日记2024/05/31 06:50:00

ASP.NET运行原理

一个ASP.NET的应用程序是开始于IIS的. 当你请求一个包含ASP.NET应用的网址时,IIS接受到请求(IIS是WEB服务守候进程),IIS收到请求后,会根据请求者请求的主机头或者IP或者端口号来找到对应的站点. 当找到站点后,如果你请求的资源是以ASPX为结尾的WEBFORM,时,IIS会将控制权交给一…

编程日记2024/05/31 06:40:00

vue 树形下拉框亲测好用

https://vue-treeselect.js.org/ 顺带说一个开发中使用这个组件遇到的问题，关于回显之后无法修改的问题找了很长时间原因是数据类型导致的问题，数组里面应该是数字类型，直接转数组的话里面的值都是字符串，所有得额外做处理了转…

编程日记2024/05/31 06:30:00

通过xmanager远程连接redhat linux as 5

通过xmanager远程连接redhat linux as 5 <?xml:namespace prefix o ns "urn:schemas-microsoft-com:office:office" />rhel5与rhel4不同的地方是，rhel5里没有/etc/X11/gdm/这个目录，rhel5的gdm的配置文件放在这里/usr/share/gdm/defa…

编程日记2024/05/31 06:20:00

bzoj 1264: [AHOI2006]基因匹配Match (树状数组优化dp）

链接：https://www.lydsy.com/JudgeOnline/problem.php?id1264 思路： n大小为20000*5，而一般的dp求最长公共子序列复杂度是 n*n的，所以我们必须优化。题目说了一个数会出现5次，那么我们可以预处理得到第一个序列a[]每…

编程日记2024/05/31 06:10:00

C语言第二次博客作业---分支结构

C语言第二次博客作业---分支结构一，PTA实验作业题目1.计算分段函数本题目要求计算下列分段函数f(x)的值 1.代码 double x, result;scanf("%lf", &x);if (x >0)result sqrt(x);elseresult pow( x 1, 2) 2 * x 1 / x;printf ("f(%.2f) …

编程日记2024/05/31 06:00:00

Lazy.NET

.NET 4.0里，在System名称空间中多了一个名为Lazy<T>新泛型类，该类的作用正如其名称所示。下面给出了一个使用的例子：1 var lazy newLazy<IList<OrderRow>>(2 () >3 {4 var rows //get order rows;5 returnrows;6 });7 8…

编程日记2024/05/31 05:50:00

Angular 组件交互

Angular 组件交互组件交互： 组件通讯，让两个或多个组件之间共享信息。使用场景： 当某个功能在多个组件中被使用到时，可以将该特定的功能封装在一个子组件中，在子组件中处理特定的任务或工作流。交互方式&#xff1…

编程日记2024/05/31 05:40:00

java-在应用中获取spring定义的bean

因为写了些bean作为quartz的任务用spring配置了，但有些时候需要在别的类中使用这些bean，没有太仔细去研究spring，依稀记得有个getBean，到网上g了一把，发现方法不止一种，选了一种最简单的方法： 主…

编程日记2024/05/31 05:30:00

Enterprise Architect 7 入门教程 1

一． 简介生命周期软件设计方案——Enterprise Architect是以目标为导向的软件系统。它覆盖了系统开发的整个周期，除了开发类模型之外，还包括事务进程分析，使用案例需求，动态模型，组件和布局，系…

编程日记2024/05/31 05:20:00

传送门 Solution Code #include<bits/stdc.h> #define ll long long #define max(a,b) ((a)>(b)?(a):(b)) #define min(a,b) ((a)<(b)?(a):(b)) inline int read() {int x0,f1;char chgetchar();while(ch<0||ch>9){if(ch-)f-1;chgetchar();}while(ch>…

编程日记2024/05/31 05:10:00

python中的单例模式

单例模式（Singleton Pattern）是一种常用的软件设计模式，该模式的主要目的是确保某一个类只有一个实例存在。当你希望在整个系统中，某个类只能出现一个实例时，单例对象就能派上用场。比如，某个服务器程序的…

编程日记2024/05/31 05:00:00

JavaScript 数据类型转换

1. typeof 操作符使用typeof操作符来检测变量的数据类型。使用方式：typeof 变量名或者 typeof(变量名) 返回结果： number、string、boolean、object、undefined、function typeof {} // 返回object typeof [] // 返回object typeof null // 返回o…

编程日记2024/05/31 04:50:00

Cisco asa 5510升级IOS和ASDM

Cisco asa <?xml:namespace prefix st1 ns "urn:schemas-microsoft-com:office:smarttags" />5510升级IOS和ASDMshow version 查看当前运行的系统信息，包括启动文件（即IOS)等 show boot 查看当…

编程日记2024/05/31 04:40:00

Angular 服务

服务的概念服务是在多个“互相不知道”的类之间共享信息的好办法。—— 官方文档可以理解为组件中需要的数据源是由服务提供的，也可以理解为组件类中的方法通过调用服务中的方法向服务器请求数据。 Injectable() 服务服务类需要导入Injectable符号并需要加上Inj…

编程日记2024/05/31 04:30:00

[Linux] 029 脚本安装包

1. 脚本安装包脚本安装包并不是独立的软件包类型，常见安装的是源码包是人为把安装过程写成了自动安装的脚本，只要执行脚本，定义简单的参数，就可以完成安装非常类似于 Windows 下软件的安装方式2. Webmin 的作用 Webmin 是一个基于…

编程日记2024/05/31 04:20:00

基于Android平台扫码识别并链接服务器demo

资料在我的网盘：Android文件夹　　第一：开发平台搭建。本项目采用Android studio（android-studio-bundle-162.4069837-windows.exe）作为开发平台，安装JDK（jdk-8u144-windows-x64.exe）。下载对…

编程日记2024/05/31 04:10:00

WCF学习笔记（二）：在WCF中使用集合传输数据

最近的开发，一直被DataContract头疼，微软为了更好的通用性和代码无关性，将DataContract进行了一系列的优化，使作为DataContract的类在进行Serialize的时候会被序列化成非常通用的数据格式，可以在任何开发语言中调用。但…

编程日记2024/05/31 04:00:00

如何面对“大概什么时候能完成？”

你在听着经理、上级或是公司内部的某类用户滔滔不绝的给你讲需求，这里面常常能听到“最好能加上……”，“我希望……”，你一边听着，一边心里盘算着这些需求背后需要怎样的技术支撑，要采纳的方案，然后你看到…

编程日记2024/05/31 03:50:00

Angular Http

Http服务 HttpClient 是 Angular 通过 HTTP 与远程服务器通讯的机制。启用Http服务的准备工作要让 HttpClient 在应用中随处可用，需要在根模块的NgModule.imports 数组中加入 HttpClientModule。 Http方法返回单个值 HTTP 是一个请求/响应式协议。你发起请求&am…

编程日记2024/05/31 03:40:00

2019第四周作业(基础作业+挑战作业）

基础题1： 输入一个正整数 n (1≤n≤10)和n 阶方阵a的元素，如果方阵a中的所有元素都沿主对角线对称，输出“Yes”, 否则，输出“No”。主对角线为从矩阵的左上角至右下角的连线，方阵a中的所有元素都沿主对角线对称指对所有…

编程日记2024/05/31 03:30:00

Taglib原理和实现：再论El和JST

作者： WalkingWithJava 出处： Java研究组织问题：你想和JSTL共同工作。比如，在用自己的标签处理一些逻辑之后，让JSTL处理余下的工作。看这个JSP例子： ＜% String name"diego"; reque…

编程日记2024/05/31 03:20:00

UWP Windows10开发获取设备位置（经纬度）

UWP Windows10开发获取设备位置（经纬度） 原文:UWP Windows10开发获取设备位置（经纬度）1.首先要在UWP项目的Package.appxmanifest文件中配置位置权限，如下图所示： 2.Package.appxmanifest后选择第三个选项卡…

编程日记2024/05/31 03:10:00

[零基础学JAVA]Java SE实战开发-37.MIS信息管理系统实战开发[JDBC](1)

MIS信息管理系统实战开发之使用MySQL实现保存开发背景ID、姓名、年龄为公共信息，而学生有成绩，工人有工资定义一个抽象类Person（ID、姓名、年龄），学生是其子类，有成绩，工人是其子类有工资ID如何…

编程日记2024/05/31 03:00:00

【数论总结】-----励志写好一篇数论总结↖(^ω^)↗//正在施工...未完工

近期学了学数论，来写一波总结吧。 （1）排列组合，比较基础的东西了吧。//只写个概念吧,(逃： 概念：就是从n个不同元素中，任取m(m≤n)个元素并成一组，叫做从n个不同元素中取出m个元素的一…

编程日记2024/05/31 02:50:00

遍历Treeview每个节点并初始化（C#）

搞了好久，哎，C#的一些控件用起来还没习惯，所以折腾啊。 TreeView的形成，必然要初始化，数据记录是从数据库中取得的，那么要先取再遍历。介绍下心得吧。首先，数据预期显示结果如下其次&#xff…

编程日记2024/05/31 02:40:00

codeforces3A

Shortest path of the king CodeForces - 3A 棋盘上的国王被单独放置。尽管他是孤独的，但并未伤心，因为他有事关全局的重要性。例如，他必须正式访问方格 t 。由于国王不习惯于浪费自己的时间，因此他想用最小的移动步数&#xff0…

编程日记2024/05/31 02:30:00

for...in和 for...of

在对数据或者对象进行遍历时，经常使用的两种方法是 for...in和 for...of，那么这两种方法有什么区别呢？ for…in for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。语法： for (variable in object) {// statem…

编程日记2024/05/31 02:20:00

J2EE复习(二)XML

2019独角兽企业重金招聘Python工程师标准>>> XML（eXtensible Markup Language）简介XML 可扩展标记语言XML是一种您可以用来创建自己的标记的标记语言。XML由万维网协会（W3C）创建 XML和Html比较比较内容 …

编程日记2024/05/31 02:10:00

Angular 路由

Angular 路由简单路由配置每个带路由的 Angular 应用都有一个Router（路由器）服务的单例对象。当浏览器的 URL 变化时，路由器会查找对应的 Route（路由），并据此决定该显示哪个组件。路由器需要先配置才…

编程日记2024/05/31 02:00:00