Angular 表单状态及校验

于 2021-08-08 16:05:51 发布
阅读量1k 收藏 1
点赞数
分类专栏： Angular 文章标签： angular angular 表单状态
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/friend_ship/article/details/119515797
版权

在angular框架中，表单状态的含义：

  • valid：校验成功
  • invalid: 校验失败
  • pending: 表单正在提交过程中
  • pristine: 数据依然处于原始状态，字段没有被修改过
  • dirty: 数据已经变脏了，被用户修改过了
  • touched: 被触摸或点击过
  • untouched: 未被触摸或点击
  • enabled： 启用状态
  • disabled： 禁用状态

内置校验规则详情见官网文档

friend_ship
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angular4中关于表单的校验示例
08-29
Angular4 表单校验示例 Angular4 中的表单校验是指在用户提交表单时对表单数据进行验证，以确保数据的正确性和完整性。在 Angular4 中，表单校验可以通过使用响应式表单和模板驱动表单两种方式来实现。下面将详细...
Angular模板表单校验方法详解
01-21
本文实例为大家分享了Angular模板表单校验的方法，供大家参考，具体内容如下 1. 创建指令 ng g directive directives/mobileValidator　 2. html <form #myForm=ngForm (ngSubmit)=onSubmit2(myForm.value, ...
angular7表单的状态字段
yw00yw的博客
07-03 453
touched 和 untouched 访问过和未访问过，获得焦点或者未获得焦点 <div> 用户名：<input type="text" formControlName="username"> </div> // 检验通过和第一次不显示 <div [hidden]="formModel.get('username').valid || for...
angular 4.0 表单控件的状态
后台模板
02-04 391
转载自 http://www.ngui.cc/news/show-144.html 表单控件除了 valid 状态外，还包含哪些状态？ 在 Angular 中表单控件有以下 6 种状态，我们可以通过 #userName="ngModel" 方式获取 ngModel 对象，进而获取控件的状态信息。具体状态如下： valid - 表单控件有效 invalid - 表
Angular 表单之状态字段
qq_21987433的博客
05-04 972
1.touched和untouched    用来判断用户是否获取过焦点，如果获取过焦点则touched=true;untouched=false,如果从来没有获取过焦点，touched=false;untouched=true,这两个字段控制错误信息是否显示。用户未访问密码时，我们控制密码的错误信息不显示：&lt;!-- 密码合法和从来没获取过焦点就将错误信息隐藏 --&gt; &lt;div ...
框架学习：angualr的表单学习
T_Tonz的博客
12-24 160
表单状态变化： touched表示失去焦点状态 untouched表示未接触时状态 pristine表示值未改变时true， dirty表示值改变 pending表示值正处于校验时 angular的表单有两种： 一、模板表单 需在主模块添加FormsModel模块 form标签内容在angular启动时会被自动渲染成NgForm属性 在form标签采用方法形式提交 例如：(ngSubmit)=...
Angular表单创建和校验
IT飞牛
05-22 889
Angular中提供了模板驱动表单和响应式表单。 相对来做，模板驱动表单使用更加简单，只需要在表单外围添加#myForm=“ngForm” 指令，给每个表单项添加ngModel指令和name属性，然后就可以通过myform.value获取到表单中所有的值； 一、模板驱动表单 1、基础用法 创建模板驱动表单需要3个步骤 1、添加#myForm=“ngForm” 2、在每个input表单项上添加ngModel指令和name属性 3、在app.module.ts中引入FormsModule import {
Angular在模板驱动表单中自定义校验器的方法
08-29
总结来说，Angular的模板驱动表单允许开发者通过自定义指令创建自定义校验器，这些校验器与Angular的内置验证器一起工作，增强了表单验证的能力。自定义校验器的实现主要涉及创建一个带有`Validator`接口的指令，并...
angular实现表单验证及提交功能
12-29
本例通过Angular框架来实现简单的表单验证 一、html结构 1、借助于bootstrap快速的编写了一个简单的表单 代码主要部分如下：  用户表单提交 <form action=upload.js class=form-horizontal name=myForm>...
Angular学习笔记50：响应式表单动态修改表单校验器
W先生
07-16 4165
继Angular学习笔记49：响应式表单验证(同步)之后，有时候会遇到这样的情况： 例如有三个属性：name,age,address，分别三个控件，有一个单选按钮，来控制用户输入哪一种输入属性。 创建一个分情况显示的表单 wujiayudeMacBook-Pro:demo-test wjy$ ng g c ModifyValidator CREATE src/app/modify-validato...
Angualr的表单校验
Ssucre的博客
07-14 627
Angualr的表单校验1 html部分1 重点2 代码1 TS部分1 重点2 代码 1 html部分 1 重点 在<form>标签中采用 [formGroup]="chatbotForm"进行绑定，chatbotForm中保存所有的验证数据。 formControlName="name"绑定被验证的数据的名称。 [(ngModel)]="params.name"绑定name使得name会自动变化。 第二点和第三点中的name都指向同一个数据。 2 代码 <form class="c
Angular2 form表单 disabled问题
特困生Kuel的博客
09-09 1380
const ctrl = new FormControl({value: ‘n/a’, disabled: true}); 通过 FormGroup getRawValue方法,可以获取包含disabled值
基于Form的Angular表单数据校验
weixin_34301307的博客
09-14 480
2019独角兽企业重金招聘Python工程师标准>>> ...
【Angular】——表单处理
给你一半糖
03-18 623
          纯HTML表单：显示表单项，校验用户输入，提交表单数据。就是普通写的HTML页面。          模板式表单：表单的数据模型是通过组件模板中的相关指令来定义的。因为使用这种方式定义表单的数据模型时，我们会受限于HTML的语法，所以模板驱动方式只适用于一些简单的场景。          响应式表单：使用响应式表单时，你通过编写TypeScript代码而不是HTML代码来创建一...
angular 表单校验显示验证失败的错误信息
后台模板
02-05 3111
转载自 http://www.ngui.cc/news/show-140.html 如何显示验证失败的错误信息？ 在 Angular 中，我们可以通过 #userName="ngModel" 方式获取 ngModel 对象，然后通过该对象的 errors 属性，来获取对应验证规则 (如 required, minlength 等) 的验证状态。 import { Comp
表单验证<AngularJs>
weixin_34327761的博客
10-19 171
常用的表单验证指令  1. 必填项验证 某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可： &lt;input type="text" required /&gt;   2. 最小长度 验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"： &lt;input type="text" n...
Angular6-表单校验-脏校验
温暖_小窝
01-05 6535
老规矩上图 构造表单 import {Component, OnInit} from '@angular/core'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; import {encryptedDES} from '../../tools/nb-fn.utils'; import {NbMess...
angularjs 由浅到深(2)
sinat_38992528的博客
11-23 238
ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error): AngularJS 实例 form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">     Email:     input type="email" name="myAddress"
angular 模板驱动表单 表单检验(自定义校验器)
榴莲不好吃的专栏
10-21 1159
一 模板驱动表单 参考文献：angular官网-模板驱动表单 新建编辑页面 ng generate component hero/NameEditor 建出此表单 ： 创建Hero模型类 创建控制此表单的组件。 创建具有初始表单布局的模板。 使用ngModel双向数据绑定语法把数据属性绑定到每个表单输入控件。 往每个表单输入控件上添加...
angular 表单提交校验控制的案列
最新发布
03-31
以下是一个简单的 Angular 表单提交校验控制案例： HTML 代码： ``` (ngSubmit)="onSubmit()" #myForm="ngForm"> <label for="name">Name: [(ngModel)]="name" required minlength="3"> *ngIf="myForm....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值