angular2 form reset

最新推荐文章于 2024-11-27 19:06:24 发布
原创 最新推荐文章于 2024-11-27 19:06:24 发布 · 2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#angular2

本文介绍了一个表单在未填写的情况下报错的问题，并提供了解决方案。通过使用reset方法，不仅可以重置整个表单，还能将表单控件恢复到初始状态。 
<div class="col-sm-8 pull-right text-danger" [hidden]="course.valid || course.untouched">
  {{'course.editCourse.courseTitle'|translate}}
</div>
这是代码，如果新增，但是有没有填的话，这个表单空间就会报错，虽然看起来是这个神龙 页面刚打开

但是

untouched 已经是false了，这时候我么可以用reset来解决，reset 不经可以重置表单

还可以重置表单里面的控件，恢复到之前的状态

angular学习（十一）—— Form
独自登高楼 望断天涯路
02-10 2565
转载请写明来源地址：http://blog.youkuaiyun.com/lastsweetop/article/details/54972551formcontrol主要用于接收用户输入，例如input, select, textarea。而form是一组相关控件的集合。form和control提供验证服务，可以在用户提交表单到后端前得到无效输入的通知。一个简单的formform的验证要比服务端的验证好很多，
【angular】ReactiveForms响应式表单验证实践（包含设置默认值及重置功能）
qq_36321909的博客
05-28 1741
创建表单数据模型 export class FormControlValidatorModel { name: string; // 姓名 age: string; // 年龄 hobbyList: string[]; // 爱好 sex: string; // 性别 constructor(data: any = {}) { this.name = data.nam...
angular-resetform:在 angular js 中重置表单变得如此简单，woooooo
05-29
角度重置 该指令帮助用户在没有 javascript 代码行的情况下重置表单数据。 查看文档以获取更多详细信息 入门 . 凉亭安装 bower install angular-resetform 安装 npm install angular-resetform 在您的模块中添加依赖项 var app=angular.module("you app name",['angular-resetform']) 使用指令 <form name="formname"> <input class="my-scroll-area" reset-form reset-form-value="hey" reset-form-clear/> <button type="submit" ng-click="formname.$resetFormData()" </form> 文档 选项 描述 重置表格
angular 表单重置状态
AsuraSylar的博客
07-01 1780
this.validateForm.reset() for (const key in this.validateForm.controls) { this.validateForm.controls[key].markAsPristine() this.validateForm.controls[key].updateValueAndValidity...
angular 重置表单
weixin_30433075的博客
03-27 1266
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link type="text/css" rel="stylesh...
AngularJS系列(十)——表单的重置和验证
咸鱼老罗的博客
09-06 3542
表单重置 表单重置实例   &lt;div ng-app="myApp"ng-controller="formCtrl"&gt; &lt;form novalidate&gt; First Name:&lt;br&gt; &lt;input ng-model="user.firstName" /&gt;&lt;br&gt; Last Name
html重置返回初始状态,将表单重置为原始状态（AngularJS 1.0.x）
weixin_32357285的博客
05-31 562
小编典典没有解决方法的解决方案我想出了一个使用AngularJS的解决方案，没有任何解决方法。这里的技巧是使用AngularJS功能来拥有多个具有相同名称的指令。就像其他人提到的那样，实际上存在一个拉取请求(https://github.com/angular/angular.js/pull/1127)，该请求进入了AngularJS1.1.x分支，该分支允许重置表单。提交此拉取请求会更改ngMo...
Angular实现form自动布局
09-02
在Angular框架中，实现表单（form）的自动布局是一项重要的任务，这涉及到用户界面的美观性和用户体验。本文将深入探讨如何在Angular中通过自定义指令（directives）和控制器（controllers）来实现这一功能。 首先...
angular Form 表单的属性和方法
qq_44327851的博客
11-05 829
在组件的方法中，我们可以使用表单属性和方法来操作表单，比如在 `submitForm` 方法中，我们通过检查 `formGroup.valid` 属性来判断表单是否通过验证，并根据需要执行相应的逻辑。`resetForm` 方法用于重置表单的值，`touchForm` 方法用于将表单标记为已触碰。总结一下，`setValue` 方法只触发 `valueChanges` 事件，而 `patchValue` 方法会触发 `valueChanges` 和 `onChange` 事件。
【Angular】响应式表单（Reactive Forms）
最新发布
u013675821的博客
11-27 1263
响应式表单（Reactive Forms）是 Angular 中处理表单的一种方式，使用时表单的控件（如输入框、选择框等）以及表单的结构都由代码控制，而不是由模板驱动。响应式表单提供了更强大的功能，适合用于复杂的表单操作，如动态表单、条件验证、表单值的处理等。是 Angular 响应式表单的基本单位，表示一个表单控件的值和状态。，并且可以直接操作表单数据和状态，适用于需要更多控制和自定义的场景。响应式表单提供了许多有用的属性和方法来管理表单状态和交互。，我们可以使用简洁的语法来创建表单控件和表单组。
angular4输入有效性_Angular 5 FormGroup重置不会重置验证器
weixin_35342111的博客
01-12 630
Angular 5 FormGroup重置不会重置验证器我的页面上有一个表单，当我致电FormGroup.reset()时，它将表单类设置为ng-pristine ng-untouched，但FormControl.hasError(...)仍然返回true。 我在这里做错了什么？模板Email is a required feildPassword is a required feildLogi...
Angular - FormGroup 踩坑合辑之：setValue，patchValue，reset
lorie_yy的博客
05-10 2148
Angular - FormGroup 踩坑合辑之：setValue，patchValue，reset
Angular中响应式表单的三种更新值方法详析
前端乱搞 vinvin1022
11-15 1480
Angular中响应式表单的三种更新值方法详析 前言   众所周知Angular响应式表单相比较模板驱动表单更大操作性、更易测试性。因此，我更推荐这类表单创造方式。 当一个用于修改用户信息的表单，数据的来源总是来自远程；而对于一个 FormGroup 的创建总在 ngOnInit 中完成。因此，这里会有一个表单更新值的问题。 而通常我们会透过 FormGroup 下的三种方式 setVal...
Angular2 之 Form 表单
为了而努力
12-15 1万+
From表单分为两种类型： 模板驱动表单（Template-Driven Forms） 模型驱动表单（Model-Driven-Forms） 模型：有结构的状态（是一种数据结构）FormContrller 表单项 @angular/forms 模板驱动表单 @angular/reactiveForms关注点是表单的行为，不是怎么生成DOM。关注点是出错了，是一种出错的状态，是否发生了改变。Te
angular6表单验证，清空校验提示
sujing0723的博客
04-21 2869
在动态验证表单时候设置为必填，如果没有点击提交，再次点开form表单的校验提示信息还在。 方法1 this.userForm.get('name').setValidators(null); //不进行校验 方法2 this.userForm.get('name').clearValidators(); //清空name的校验 方法3 this.userForm.reset();...
项目常见错误及解决方法-angular表单验证清除$dirty样式问题
Alfred的博客
10-18 4610
最近，公司angular项目，使用到了angular自身的表单验证，我是用了其自身验证，具体场景是 增加一个条目，在表单中验证是否符合条件，增加成功后，再次增加，重置表单，重复上述过程。但是遇到一个问题，就是在添加一次后，每一次重新添加，将表单清空。按道理此时，$dirty是不应该起作用的，但是还是会有不提示。 *排序
Angualr6 响应式表单赋默认值和重置值
phpfzh的博客
06-25 3432
ngOnInit():void{ this.register.generateUserName().subscribe(rep =&gt;{ if(rep.meta.code == "88"){ this.form.patchValue({ username:rep.data.username ...
Angular2 select用法-设置默认值和事件
热门推荐
erciyuan_nuonuo的博客
11-09 2万+
angular2支持双向绑定，在使用select下拉框主要通过ngModel和ngModelChange实现选择事件比如现在有三个学生小明，小红，小黑，对双向绑定的student设置你想要的select值就可以在下拉框默认选中let students:string[]=['xiaoming','xiaohong','xiaohei']; let student:string=''; let info
Angular实现自动布局的form详解与代码示例
2. **HTML结构**：HTML部分展示了两个类似的表单结构，都使用了Angular的`ng-controller`指令将`formlayoutCtrl`应用到`<div>`上。`form-horizontal`类表明采用的是Bootstrap的水平布局样式。表单名称为`formlayout`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值