首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在angular 6中重置FormGroup中的特定控件

在Angular 6中重置FormGroup中的特定控件,可以通过以下步骤实现:

  1. 首先,确保你已经导入了必要的模块和依赖项。在组件文件的顶部,添加以下导入语句:
代码语言:typescript
复制
import { FormGroup, FormBuilder } from '@angular/forms';
  1. 在组件类中,创建一个FormGroup对象,并使用FormBuilder构建器来初始化它。例如:
代码语言:typescript
复制
myForm: FormGroup;

constructor(private formBuilder: FormBuilder) {
  this.myForm = this.formBuilder.group({
    control1: [''],
    control2: [''],
    control3: ['']
  });
}

在上面的示例中,我们创建了一个名为myForm的FormGroup对象,并初始化了三个控件(control1、control2、control3)。

  1. 现在,当你想要重置特定控件时,可以使用reset()方法。例如,如果你想要重置control2的值,可以在组件类中添加以下代码:
代码语言:typescript
复制
resetControl2() {
  this.myForm.get('control2').reset();
}

在上面的代码中,我们使用get()方法获取control2控件,并调用reset()方法来重置它的值。

  1. 最后,在模板中调用resetControl2()方法来触发重置操作。例如,在按钮的点击事件中添加以下代码:
代码语言:html
复制
<button (click)="resetControl2()">重置Control2</button>

这样,当按钮被点击时,resetControl2()方法将被调用,从而重置control2的值。

总结:

在Angular 6中,你可以通过创建FormGroup对象和使用FormBuilder构建器来初始化它,然后使用reset()方法来重置特定控件的值。通过在模板中调用相应的方法,你可以实现重置FormGroup中特定控件的功能。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)

产品介绍链接地址:https://cloud.tencent.com/product/cvm

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 从入坑到挖坑 - 表单控件概览

一、Overview angular 入坑记录笔记第三篇,介绍 angular 中表单控件相关概念,了解如何在 angular 创建一个表单,以及如何针对表单控件进行数据校验。...4.3.2、通过 FomGroup 组合多个控件 一个表单不可能只有一个控件,通过在组件构造 FormGroup 实例来完成对于多个表单控件统一管理 在使用 FormGroup 时,同样在组件定义一个属性用来承载控件组实例...,然后将控件每一个控件作为属性值添加到实例 import { Component, OnInit } from '@angular/core'; // 引入 FormControl 和 FormGroup...通过使用 formGroupName 属性将 FormGroup 控件 FormGroup 实例绑定到控件上 <form [formGroup]='profileForm' (ngSubmit)=...4.4.2、跨字段交叉验证 有时候需要针对表单多个控件数据进行交叉验证,此时就需要针对整个 FormGroup 进行验证。

18.9K20

Angular系列教程-第四节

1.表单 Angular 提供了两种不同方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改途径 使用’@angular/forms’库FormGroup, FormControl,FormArray...,FormBuilder 等类构建出数据对象就是响应式表单,在响应式表单,我们会在数据源里面进行各种操作,像添加校验等,在html文件中使用 formGroup,formGroupName,formControlName...和更新) formgroup使用 表单提交 更新部分内容(patchValue) 表单验证(导入Validators,设置字段属性) 表单状态(status) formarray(管理任意数量控件...max 此验证器要求控件值小于等于指定数字 required 此验证器要求控件具有非空值 requiredTrue 此验证器要求控件值为真 email 此验证器要求控件值能通过 email

2.8K50
  • 理论 | Angular 响应式编程 -- 浅淡 Rx 流式思维

    在 Rx--隐藏在Angular 2.x利剑 一文我们已经初步了解了 Rx 和 Rx 在 Angular 应用。 今天我们一起通过一个具体例子来理解响应式编程设计思路。...Angular 处理响应式表单只有 3 个步骤: 1、在组件 HTML 模版给要处理控件加上 formControlName="blablabla" 2、form 标签添加 [formGroup...]="xxx" 指令,这个 xxx 就是你在组件声明 FormGroup 类型成员变量:比如下面代码 form: FormGroup; 3、在组件构造函数取得 FormBuilder 后(...比如下面代码 constructor(private fb: FormBuilder) { }),用 FormBuilder 构造表单控件数组并赋值给刚才类型为 FormGroup 成员变量。...Angular 4 NgIf 改进 Angular 4  ngIf 现在可以携带 else 了,如果你曾经使用过 Angular 就知道,原来我们是得写两个 ngIf 来完成类似的功能

    5.3K10

    Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

    前言 表单在整个系统作用相当重要,这里主要扯下响应表单实现方式。...首先需要操作表单模块引入这两个模块; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ---- 表单控件响应几种状态...; 在Submit()函数内,在点击提交时候对整个表单一一去判断,传统方式基本这样 每个控件输入时候对应去触发对应事件做校验,比如[ngModelChange]来处理双向绑定值校验 ---- 数据驱动...(Reactive Form) 响应式表表单:原理是一开始就构建整个表单,表单值通过特殊指令formControlName一一关联(类似ngModel); 相关名词: FormGroup: 用来追踪表单控件有效状态及值.../core'; import { FormGroup, Validators, FormBuilder } from '@angular/forms'; // 引入表单一些特性 import { Router

    3.8K20

    移除 View Engine 转用 Ivy,盘点Angular 12重要更新

    用于向 TyperScript 类写入清晰代码 Nullish 合并,现可以与 Angular 模板配合使用。...为了提高性能,新版本删除了 DomAdapter 多种未使用方法。 新版本向 localize-extract 添加一种新格式,名为 legacy-migrate。...在新版本,您可以通过 BrowserAnimationsModulewithConfig 禁用动画。 向 FormArray 与 FormGroup 引入 emitevent 选项。...向 routerLinkActiveOptions 引入更多微调控件。 允许您自定义路由器出口实施方法。...在表单,引入最小与最大值验证器。 新版本可导出 HTTP 状态码列表。 向 Angular 语言服务添加一项功能,允许用户直接访问使用模板文件组件实际位置。

    4.4K10

    纯前端控件集 WijmoJS 2018V2发布,在React、Vue和Angular更易用

    安装后,它会在每个Angular 框架下WijmoJS组件上方添加“Wijmo Designer ...”操作。单击操作按钮后,它将打开一个设计界面,用于自定义该特定组件。...开发人员可以实时更改属性和绑定事件,并将所做更改保存回 Angular应用程序。 要在VSCode安装此扩展,请单击VS Marketplace上Designer设置“安装”按钮。...或者,还可以在VSCode扩展管理器搜索“wijmo”并从那里安装。 在安装后重新加载VSCode。 然后打开一个使用WijmoJS 控件Angular应用程序并尝试启动设计器。...随着新版本上线,WijmoJS 添加了Web Components In Angular示例,演示了如何在Angular应用程序中使用 WijmoJS Web组件。...其他流行框架(React,Vue,Polymer等)示例正在开发。 支持SASS类型样式 WijmoJS 控件样式(布局,默认样式)最初是用CSS编写。但如今,已经完成了SASS样式重写。

    7K20

    使用Angular8和百度地图api开发《旅游清单》

    ,service为应用所需服务区,http服务,存储服务,custom.modules文件为第三方组件安置区。...根模块提供了用来启动应用引导机制。一个应用通常会包含很多功能模块。 组件 每个 Angular 应用都至少有一个组件,也就是根组件,它会把组件树和页面 DOM 连接起来。...this.items = this.locationService.getItems(); } ngOnInit() { } } 复制代码 服务与依赖注入 对于与特定视图无关并希望跨组件共享数据或逻辑...服务类定义通常紧跟在 “@Injectable()” 装饰器之后。该装饰器提供元数据可以让你服务作为依赖被注入到客户组件。...添加旅游清单 表单空间我们都用h5原生控件,我们使用angular提供form模块,具体代码如下: import { Component, OnInit } from '@angular/core';

    6K30

    当nz-checkbox-group多选框组遇上必选校验

    当nz-checkbox-group多选框组遇上必选校验 Angular2 ng-zorro-antd checkbox 今天表单中用到ng-zorro-antd组件多选框nz-checkbox-group...this.validateForm.value.one); // 3 console.long(this.validateForm.invalid);// 4 结果发现 初始时:1、false,2、false,3、oneOption值...,4、false 选择一个选项后:1、true,2、false,3、oneOption值+选中value,4、false 从而始终无法触发显示 “通知范围必选” 第一次尝试 最开始尝试是将this.validateForm.value.scopes...nzValidateStatus 会自动从 NgControl 获取数据,也可以手动指定特定 NgControl组件将表单校>验函数校验过程和异步返回结果显示对应error | validating...于是有了如下终极解决方案: 问题.html不用做修改。 问题.ts修改如下: //因为不想在提交方法_submitForm()再循环一遍获取多选结果,就只好在这先定义一个临时用于存储选择结果。

    4.4K20

    (转) 别再对 Angular 表单 ControlValueAccessor 感到迷惑

    首先我解释下为啥需要 ControlValueAccessor 接口以及它在 Angular 是如何使用。...input,textarea 进行交互,并且很有可能需要自定义一个表单控件作为 Angular 组件而不是使用原生表单控件,而通常自定义表单控件会封装一个使用纯 JS 写控件 jQuery UI's...本文我将使用原生表单控件术语来区分 Angular 特定 formControl 和你在 html 使用表单控件,但你需要知道任何一个自定义表单控件都可以和 formControl 指令进行交互,而不是原生表单控件...下图是 Angular 表单控件 如何通过 ControlValueAccessor 来和原生表单控件交互(译者注:formControl 和你写或者 Angular 提供 CustomControlValueAccessor...,当 Angular 在组件模板遇到 input 或 textarea DOM 原生控件时,会使用DefaultValueAccessor 指令: @Component({ selector:

    3.8K20

    在前端理解MVC服务之 Angular篇(完结)

    在第三篇文章,应用程序将使用 Angular 构建,该版本来自TypeScript 第二个版本。因此,本文介绍应用程序从 TypeScript 到Angular迁移。...但在此示例,我们目标是向您展示从 JavaScript 到 Angular 演化过程。...在此特定情况下,我们将使用数组来存储所有用户,并生成与读取、修改、创建和删除 (CRUD) 用户关联四种方法。...下面是为此示例创建模板(一个角度丰富 HTML 版本): Users <form [formGroup]="userForm" (ngSubmit)="add(userForm.value...但是,我们注意到,前几部分许多 DOM 操作代码已通过 Angular 得到解决,它们提供了两个结构指令, @ ngFor 和 _ ngIf,它们允许从模板本身轻松操作 DOM。

    4.1K20

    AngularDart4.0 指南-体系结构概述 顶

    主要Angular库是angular,大多数app模块导入如下: import 'package:angular/angular.dart'; Angular包有其他重要库,angular.security...HeroDetailComponent是HeroListComponent一个子项。 ? 注意是如何在原生HTML元素合适存放。...没有一个框架痕迹,没有Angular特定代码。 实际上,HeroListComponent实际上只是一个类。 直到你告诉Angular它是一个组件。...建筑外包是你必须添加元数据到你代码,以便Angular知道该怎么做。 数据绑定 如果没有框架,您将负责将数据值推送到HTML控件,并将用户响应转化为操作和值更新。...用户更改也会返回到组件,将属性重置为最新值,就像事件绑定一样。 Angular在每个JavaScript事件循环中处理所有数据绑定,从应用程序组件树根到所有子组件。 ?

    7.9K30

    Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

    它是如何在Angular 2工作Angular 2不具有双向digest cycle,这是与Angular 1不同。...如何在Angular 2应用程序中使用codelyzer? 所有企业应用程序都会遵循一组编码惯例和准则,以更好方式维护代码。...如何在Angular 2启用延迟加载? 大多数企业应用程序包含用各式各样用于特定业务案例模块。捆绑整个应用程序代码并完成加载,会在初始调用时,产生巨大性能开销。...Observable提供像map,forEach,reduce之类类似于数组运算符,还有强大运算符,retry()或replay()等,使用起来是相当方便。...Wijmo 为每一个UI控件都提供了 Angular2 组件。所有 Angular2 组件都提供了完全声明性标记。

    17.3K80

    AngularDart4.0 指南- 表单 顶

    模板驱动形式 您可以通过使用本页描述特定于表单指令和技术在Angular模板语法编写模板来构建表单。 您也可以使用响应式(或模型驱动)方法来构建表单。...您可以创造性地设计控件,将它们绑定到数据,指定验证规则和显示验证错误,有条件地启用或禁用特定控件,触发内置视觉反馈等等。 Angular通过许多重复,模板化任务使处理过程变得简单。...禁用窗体提交按钮,直到窗体有效。 建立 按照设置说明创建一个名为表单新项目。 添加angular_forms Angular表单功能位于angular_forms库,该库位于其自己。...靠近表单顶部诊断确认所有的更改都反映在model。 从模板删除诊断绑定,因为它已经达到了目的。 根据控制状态给出视觉反馈 使用CSS和类绑定,您可以更改表单控件外观以反映其状态。...预期演示。 增加代码过后demo不会教你任何关于表单新东西。 但是这是一个锻炼一些新获得绑定技巧机会。 如果您不感兴趣,请跳至本页摘要。

    17.5K30

    常用表单元素有哪些_h5新增表单元素属性

    ,默认为”get”(也可以是post) name:控件名称;value:input控件默认文本值;size:input控件在页面显示宽度...7. reset:重置按钮,会重置当前表单全部内容。 8. image:图像形式提交按钮,写法是“”。 9. hidden:隐藏域,隐藏字段对于用户是不可见。...在最新html5,有一些表单新增属性,多用于js, datalist : 定义填写一个input时,提示几个option用于提示。可通过inputlist特性与此元素作关联。...output : 表示计算结果。可通过for特性与其它能够影响运算元素(input)作关联。...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    3.4K30
    领券