Angualr6 响应式表单赋默认值和重置值

Angular6响应式表单默认值与重置操作详解
最新推荐文章于 2025-11-17 12:10:32 发布
原创 最新推荐文章于 2025-11-17 12:10:32 发布 · 3.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了在Angular6中如何为响应式表单设置默认值，以及如何有效地重置表单的状态。通过实例代码演示了如何在表单构建时赋予初始值，并展示了在应用中实现表单重置的方法，帮助开发者更好地理解和掌握Angular6表单处理技巧。 
ngOnInit():void{
    this.register.generateUserName().subscribe(rep =>{
         if(rep.meta.code == "88"){
           this.form.patchValue({
             username:rep.data.username
             
           });
         }
    });
}
this.form.patchValue   只会重新赋对应name的值，原form的值不变。
this.form.reset  会全部赋值

                

        

    

  



    



                



	

		

			

				
					
Angular 11中的表单控件优化：解决IE下Dropdown选项问题

				
			

			

				

					m0_74337424的博客
				

				

					03-16
					
					45
					
				

			

		

		

			
				
通过移除无用的绑定，优化表单控件的初始化和重置逻辑，我们成功解决了在IE浏览器中下拉列表选项显示问题的兼容性问题。本文将探讨如何在Angular应用中优化表单控件的表现，特别是解决在Internet Explorer（IE）中出现的Dropdown选项显示问题。在一个Angular 11的项目中，我们有一个包含两个单选按钮和一个下拉列表的页面。然而，在IE浏览器中，即使代码在Chrome上表现良好，下拉列表中仍旧显示一个空选项。值得注意的是，在Edge中开启IE模式时，代码仍然能正常工作。

			
		

	



                

            
              



	

		

			

				
					
angular4更改表单中显示的值_关于angular4中FormBuilder重新赋值时发生的问题

				
			

			

				

					weixin_39620653的博客
				

				

					12-19
					
					396
					
				

			

		

		

			
				
代码如图constructor(public fb: FormBuilder) {this.formModel = this.fb.group({leader_id: ['']});this.httpService.myGet(this.organizationsService.getOrganizations()).subscribe(data => {this.formModel = t...

			
		

	



              


  
              

                


	

		

			

				
					
angular4  form表单初始化

				
			

			

				

					weixin_33842328的博客
				

				

					04-10
					
					920
					
				

			

		

		

			
				
import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormControl, FormGroup, ValidationErrors, Validators} from '@angular/forms';
import {MarketStaffService} from '../../../../@...

			
		

	





	

		

			

				
					
【Angular】--删除表中数据

				
			

			

				

					张姐姐聊编程
				

				

					11-05
					
					1416
					
				

			

		

		

			
				
最近一直在忙Angular的图书馆项目，在软考和这个图书馆项目之间，一直在来回切换，终于体会到了忙碌是什么感觉。也终于体会到了米老师所说的时间管理的重要性是什么概念。好了，现在回归的主题了，看看小编这次的分享吧。

			
		

	



		

			
		



	

		

			

				
					
【angular】ReactiveForms响应式表单验证实践（包含设置默认值及重置功能）

				
			

			

				

					qq_36321909的博客
				

				

					05-28
					
					1735
					
				

			

		

		

			
				
创建表单数据模型
export class FormControlValidatorModel {
  name: string; // 姓名
  age: string; // 年龄
  hobbyList: string[]; // 爱好
  sex: string; // 性别

  constructor(data: any = {}) {
    this.name = data.nam...

			
		

	





	

		

			

				
					
Angular formControl表单应用：清除input输入框中的值value

				
			

			

				

					Ahua_Core的博客
				

				

					06-03
					
					2444
					
				

			

		

		

			
				
Angular 表单formControl应用：清除input输入框中的值value需求描述代码实现
需求描述
这次做的是一个与angular formControl表单相关的需求。
用户操作顺序如下：

有一个input输入框
用户在input中输入内容
点击一个button
保存当前内容，并提交至DataBase
清空input输入框中的value，以供下一次输入。

这样的需求很合理。因为在第一次输入后，用户存在后续第二次或者第三次甚至更多次输入提交操作的可能。但总不可能说去不断刷新页面加载一个新的表

			
		

	





	

		

			

				
					
angular Form 表单的属性和方法

				
			

			

				

					qq_44327851的博客
				

				

					11-05
					
					820
					
				

			

		

		

			
				
在组件的方法中，我们可以使用表单属性和方法来操作表单，比如在 `submitForm` 方法中，我们通过检查 `formGroup.valid` 属性来判断表单是否通过验证，并根据需要执行相应的逻辑。`resetForm` 方法用于重置表单的值，`touchForm` 方法用于将表单标记为已触碰。总结一下，`setValue` 方法只触发 `valueChanges` 事件，而 `patchValue` 方法会触发 `valueChanges` 和 `onChange` 事件。

			
		

	





	

		

			

				
					
21、深入探索Angular表单：从基础到实战

				
			

			

				

					i7j8k9l的博客
				

				

					08-25
					
					39
					
				

			

		

		

			
				
本文深入介绍了Angular中两种主要的表单处理方式：模板驱动表单和响应式表单。从基础的HTML表单构建开始，逐步讲解了如何在Angular应用中集成表单，包括数据绑定、状态管理、动态修改和数据监听等内容。通过详细的代码示例和流程图，帮助开发者理解两种表单类型的使用场景与优缺点，以便在实际项目中灵活运用。

			
		

	





	

		

			

				
					
20、深入探索 Angular 2 表单构建与验证

					
最新发布

				
			

			

				

					blockchain9miner的博客
				

				

					11-17
					
					5
					
				

			

		

		

			
				
本文深入探讨了 Angular 2 中的表单构建与验证机制，涵盖了从基础的双向数据绑定到高级的 Control、ControlGroup 和 FormBuilder 的使用。详细介绍了如何通过 NgForm 指令跟踪表单状态、利用 Validators 进行输入验证，并对比了经典表单处理方式与单向数据流方式的优劣。同时提供了完整的代码示例和流程图，帮助开发者高效构建可维护、高性能的 Angular 2 表单应用。

			
		

	





	

		

			

				
					
angular input 默认值

				
			

			

				

					天外来客的博客
				

				

					12-04
					
					8330
					
				

			

		

		

			
				
angular input 默认值

			
		

	





	

		

			

				
					
angularjs学习笔记—指令input

				
			

			

				

					weixin_34125592的博客
				

				

					03-30
					
					299
					
				

			

		

		

			
				
input[text]

input一般和ngModel结合使用来实现双向绑定，同时angular提供了很多表单校验的指令


required 必填
ngRequired 必填（ngRequired可以控制是否是必填校验）

ngMinlength 最小长度
ngMaxlength 最大长度
pattern 正则匹配
ngPattern...

			
		

	





	

		

			

				
					
angular6踩坑记

				
			

			

				

					wangyuanpei123的博客
				

				

					11-05
					
					1885
					
				

			

		

		

			
				
1、ts里route跳转  


import { Router} from '@angular/router';

public router: Router,

this.router.navigate(['/project/pm'],{queryParams:{'unique_no':unique_no});

页面

A页面

<a [routerLink]="['../aaa...

			
		

	





	

		

			

				
					
angular6表单验证，清空校验提示

				
			

			

				

					sujing0723的博客
				

				

					04-21
					
					2868
					
				

			

		

		

			
				
在动态验证表单时候设置为必填，如果没有点击提交，再次点开form表单的校验提示信息还在。

方法1


this.userForm.get('name').setValidators(null); //不进行校验

方法2


this.userForm.get('name').clearValidators(); //清空name的校验

方法3


this.userForm.reset();...

			
		

	





	

		

			

				
					
Angular6.x - 3. 组件信息交互

				
			

			

				

					crf_moonlight的博客
				

				

					09-01
					
					926
					
				

			

		

		

			
				
概括

组件之间的交互是一个很重要的点，之前用vue的时候是直接用vuex挂到全局变量，现在看漏洞非常大。 
Angular的组件间信息交互分大概分为以下几种情况：


父组件向子组件传递值 
父组件： input绑定，可以传值过去
子组件：setter或ngOnChanges()，可以拦截收到的值并做处理 （可选）
父组件获取子组件的值 
子组件创建自定义事件，通过事件传递值，父组件进行监听
通...

			
		

	





	

		

			

				
					
AngularJs input type =“range“ vlaue默认值为50？

				
			

			

				

					
				

				

					03-27
					
					3443
					
				

			

		

		

			
				
最近做项目，引入了 three.js 做3d模型预览，然后有个功能是放大 缩小的功能，里面用到了 H5的input 滑块！先看下效果图（灯光还没调好）!

再看下上图的html代码：

这里设置了滑块的最大值max，最小值min，每次的步数step，默认值value，因为这些配置都是请求回来的配置数据，是个异步的数据，所以刚开始加载这个3d组件的时候我觉得这些值都是underfined的,但是当我打断点的时候发现 value默认值为50，并且一初始化的时候就跑了ng-change事件（underfined变

			
		

	





	

		

			

				
					
使用angularjs的ng-options时如何设置默认值(初始值)

					
热门推荐

				
			

			

				

					lshj01的专栏
				

				

					01-17
					
					2万+
					
				

			

		

		

			
				
这两天我用ng-options过程中遇到的初始值为空白的问题，记得去年就遇到过，怎么解决的忘记了，费了一阵子功夫之后解决了，想记下来，方便遇到同样问题的小伙伴当然还有自己。
  1.场景：
      就是做一个查询列表的弹窗，其中有一个条件需要用到下拉菜单，数据是用过ajax传递过去的。

			
		

	





	

		

			

				
					
Angular 设置input[number] 的初始值和双向绑定的使用

				
			

			

				

					桐匠的博客
				

				

					07-30
					
					5258
					
				

			

		

		

			
				
使用 AngularJS 表达式来设置输入框的初始值和绑定变化后的值

			
		

	





	

		

			

				
					
input默认设置值

				
			

			

				

					秉持Love and share的态度去学习和生活
				

				

					12-08
					
					1万+
					
				

			

		

		

			
				
input默认设置值

			
		

	





	

		

			

				
					
Angular 父子组件传值

				
			

			

				

					yanyi24的博客
				

				

					01-08
					
					1032
					
				

			

		

		

			
				
前面，我们介绍了基本的属性绑定这些基础，这一节我们将介绍如何使用ng命令生成一个组件，并且还将介绍组件之间的相互属性传值。
原文阅读

ng命令生成组件
在angular中，通过ngCli生成组件其实是一件很简单的事情。当然，我们直接复制已有的组件，再修改文件名，也是可以的。但是，这样做不会自动引入我们所创建的新组建。所以，ng命令是我们创建组件的首选。
接下来，我们将在src/app/components/创建一个dialog组件。
/**
 * 语法：
 * ng generate component.

			
		

	





	

		

			

				
					
提交表单不重置表单

				
			

			

				

					06-19
				

			

		

		

			
				
5.表单重置后如何恢复默认值（非空值）？</think>### 表单提交后自动重置表单的实现方法  根据您的需求（提交后自动重置）和站内引用内容，以下是几种常用实现方案：  #### 1. React 中使用 ref 重置（推荐） ```jsx...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值