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

从反应式表单Angular 4的下拉列表中选择另一个值后清除FormArray

反应式表单是Angular中一种用于处理表单数据的机制。Angular 4中的反应式表单提供了FormArray来处理动态表单控件的集合。当从下拉列表中选择另一个值后,清除FormArray的方法如下:

  1. 首先,需要在组件中引入必要的模块和类:
代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
  1. 在组件类中创建一个表单对象,并初始化FormArray:
代码语言:txt
复制
@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  form: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      dropdown: '',
      formArray: this.formBuilder.array([])
    });
  }
}
  1. 在模板中使用下拉列表和FormArray控件:
代码语言:txt
复制
<form [formGroup]="form">
  <select formControlName="dropdown" (change)="clearFormArray()">
    <option value="">Select an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </select>

  <div formArrayName="formArray">
    <div *ngFor="let control of formArray.controls; let i = index">
      <input [formControlName]="i" placeholder="Value {{ i + 1 }}">
    </div>
  </div>
</form>
  1. 在组件类中添加一个方法来清除FormArray:
代码语言:txt
复制
clearFormArray() {
  const formArray = this.form.get('formArray') as FormArray;
  formArray.clear();
}

在上述代码中,我们通过在下拉列表的change事件中调用clearFormArray()方法来清除FormArray。该方法首先获取formArray控件的引用,然后使用clear()方法来清除所有的控件。

这样,当从下拉列表中选择另一个值后,FormArray中的所有控件都会被清除,以便重新填充新的数据。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云数据库(TencentDB)。

  • 腾讯云云服务器(CVM):提供高性能、可扩展的云服务器实例,适用于各种应用场景。详情请参考:腾讯云云服务器
  • 腾讯云数据库(TencentDB):提供稳定可靠的云数据库服务,包括关系型数据库(MySQL、SQL Server等)和非关系型数据库(MongoDB、Redis等)。详情请参考:腾讯云数据库
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular8稳定版修改概述

这允许在现代用户代理和旧用户代理经典脚本中选择性地执行模块脚本. SVG作为模板 您现在可以将SVG文件用作模板。到目前为止,我们只能选择使用内联HTML或外部HTML作为模板。...目前,它处于“选择预览”模式。 Bazel可作为选择加入,预计将包含@angular/cli在第9版。...清除所有元素 以前要删除所有元素,formArray 我们必须循环删除第一个元素直到空: while(formArray.length){ formArray.removeAt(0); } 现在就不需要那样操作了...弃用API @angular/platform-browser删除了已弃用DOCUMENT @angular/platform-browser移除了DOCUMENT。...现在它已从包列表删除。 配置ViewChild / ContentChild查询时间 使用此功能时,必须提供静态标志以定义何时需要解析ViewChild和ContentChild实例。

4.5K20

Angular系列教程-第四节

1.表单 Angular 提供了两种不同方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改途径 使用’@angular/forms’库FormGroup, FormControl,FormArray...,FormBuilder 等类构建出数据对象就是响应式表单,在响应式表单,我们会在数据源里面进行各种操作,像添加校验等,在html文件中使用 formGroup,formGroupName,formControlName...等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动表单是我们实例化好一个类数据之后,在html中使用 NgForm 指令将数据和表单进行绑定,使用[(ngModel...) 表单验证 同步验证器和异步验证器 备注:同步验证先执行,异步验证执行 3.模板驱动表单使用 导入formcontrol 使用ngModel实现双向绑定 使用模板变量来获取表单 4

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

    今天小课堂主要内容是,input表单应用,还有在html5新增属性。 表单元素是允许用户在表单(比如:文本域,下拉列表,单选框,复选框等等)输入信息元素,最主要作用就是收集信息。...即输入区加有文字边框。 3. legend:定义域标题,即边框上文字。 4. label:定义一个控制标签。如输入框前文字,用以关联用户选择。 5. input: 定义输入域,常用。...6. textarea: 定义文本域(一个多行输入控件),默认可通过鼠标拖动调整大小。 7. button: 定义一个按钮。 8. select: 定义一个选择列表,即下拉列表。...9. option: 定义下拉列表选项。 接下来是对这些表单元素具体分析。...2. tel:编辑电话号码控件,提交时换行符会自动输入框中去掉。 3. url:编辑url控件,提交时换行符与首位空格都将自动去除。 4. email:可输入一个邮件地址。

    3.4K30

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

    一、Overview angular 入坑记录笔记第三篇,介绍 angular表单控件相关概念,了解如何在 angular 创建一个表单,以及如何针对表单控件进行数据校验。...入坑到弃坑 - Angular 使用入门 Angular 入坑到挖坑 - 组件食用指南 Angular 入坑到挖坑 - 表单控件概览 三、Knowledge Graph ?...将数据和一些对于用户行为约束(某个字段必须填啊、某个字段长度超过了长度限制啊)绑定到组件模板,从而完成与用户交互 4.2.1、模板驱动表单双向数据绑定 在根模块引入 FormsModule...,从而生成错误信息列表 在进行用户输入数据有效性验证时,在控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板获取到指定控件状态信息,之后就可以通过获取错误信息列表来进行反馈 <div...同模板驱动表单数据有效性验证相同,在响应式表单同样可以使用原生表单验证器,在设定规则时,需要将模板控件名对应数据第二个参数改为验证规则 在响应式表单,数据源来源于组件类,因此应该在组件类中直接把验证器函数添加到对应

    18.9K20

    AngularDart4.0 指南- 表单

    hero-form@Component选择意味着您可以使用元素将此表单放在父模板。 templateUrl属性指向模板HTML单独文件(您将很快创建)。...你会看到一个样式化表单! 使用* ngFor添加powers 英雄必须从一个固定机构批准权力列表选择一个超级大国。 您在内部维护该列表(在HeroFormComponent)。...如果需要,可以将相同类型错误消息添加到,但这不是必须,因为选择框已经将权限限制为有效。...点击清除按钮。 文本字段变为空白,如果您更改了power,它将恢复为默认。 用ngSubmit提交表单 用户应该能够在填写表单提交这个表单。...提交标志变为真,表格消失。 您将看到表格显示英雄模型(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交标志。 当您单击编辑按钮时,该表消失,并且可编辑表单重新出现。

    17.5K30

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

    移除 View Engine,转而使用 Ivy 去年开始,Angular 就开始默认使用新渲染和编译工作管线 Ivy。...事实上, Angular 9 开始,新 Angular 应用程序就默认启用 lvy。...严格 null 检查将报告各可能为 null 片段。这同样是一项重大变化。 APP-INITIALIZER 令牌类型有所变更,旨在准确反映 Angular 处理返回类型。同样属于重大变化。...在新版本,您可以通过 BrowserAnimationsModulewithConfig 禁用动画。 向 FormArray 与 FormGroup 引入 emitevent 选项。...在表单,引入最小与最大验证器。 新版本可导出 HTTP 状态码列表。 向 Angular 语言服务添加一项功能,允许用户直接访问使用模板文件组件实际位置。

    4.4K10

    AngularDart Material Design 输入 顶

    请改用表单API clearIconTooltip String  显示在清除图标上工具提示。...将此设置为true会更改行为,以便在更改选项或选项时:       1.选择第一个选定在选项中有效       2.如果选择没有选定,则选项没有任何活动 inputText String...请参阅Filterable过滤方法。默认为10。 loading bool  打开时没有可用建议,请在建议下拉列表显示加载指示符。...默认情况下使用单个选择模型。 shouldClearOnSelection bool  菜单中选择项目是否清除文本。...Accessor始终设置输入设置原始String,但仅在可以解析输入时设置Control。 keypressUpdate属性在每个按键上都有值更新,而默认是仅在模糊事件上更新

    5.3K40

    8分钟为你详解React、Angular、Vue三大框架

    显著特点 组件化 React代码由称为组件实体组成。组件可以使用React DOM库渲染到DOM一个特定元素。当渲染一个组件时,可以传入被称为 "props "。 ?...componentDidMount是在组件 "挂载 "调用(组件已经在用户界面创建了,通常是通过将其与DOM节点关联起来)。这通常用于通过API远程数据源触发数据加载。...常用命令 终端上,全局安装Angular CLI: npm install -g @angular/cli 使用 ng new 命令创建一个新 Angular CLI 工作区: ng new my-project-name...Vue用户可以使用模板语法,也可以选择使用JSX直接编写渲染函数,渲染函数允许软件组件构建应用程序。...4、变换效果 当DOM插入、更新或删除项目时,Vue提供了多种方法来部署变换效果。这包括了以下工具: 自动应用CSS变换和动画类 集成第三方CSS动画库,如Animate.css等。

    22.1K20

    AngularJS 使用ngOption实现下拉列表

    最近使用到了ngOption实现下拉选择列表,由于需要实现分组等功能,百度了下没有太好文章,就百度到一篇英文帖子,按照其中代码很顺利搞定了。...本篇根据文中代码,详细讲述下如何实现下拉列表 更多内容参考:AngularJS知识总结 下拉列表简单使用 ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定...; 另一个是ng-options用于确定下拉列表元素数组。...engineer.currentActivity进行双向数据绑定,然后列表选项是activities每一个。...当你选择一个下拉列表选项时候,就会覆盖掉这个初始。 所以更多时候会使用一个id进行标识,这样在初始化赋值时候,只需要设定一个id就可以了。

    2.2K100

    Angularjs基础(十二)

    ng-model-options       描述:规定如何更新模型             实例: 在失去焦点时绑定输入框scope 变量。                 ...ng-options         描述:在列表中指定           实例:使用数组元素填充下拉列表:         <div ng-app="myApp...ng-options指令使用数组来填充<em>下拉</em><em>列表</em>,多次情况下与ng-repeat 指令一起使用。               ...option>Ford                    定义和用法:             ng-selected 指令用于设置<em>列表</em><em>中</em><em>的</em>...语法:         参数值: <em>值</em>: expression 描述: <em>表单</em>提交<em>后</em>函数被调用,或者一个表达式将被执行,表达式返回函数调用

    3.1K100

    codereview-s8

    angular遭遇一个奇葩问题 这个问题是我在本期开发排班器组件时遇到一个很奇葩问题,大体描述就是如上面github链接描述一样,就是当父组件一个数据采用双向绑定时,并且需要已事件回调方法更新其内部某个属性...但是在angular遇到奇葩现象现象就是,在父组件进行更新时,不知道是因为签名缘故还是双向绑定缘故,这个onChange都会先于子组件运行一次,那么问题来了,这个方法本来调用时机是子组件更新需要通知父组件进行相应更新时调用...最佳实践 解决方法在这里,这种解决方法算是一种workaround,即在组件中使用另一个对象来储存父组件需要更新那个,算是做了一种类似中间件处理,之后因为双向绑定自动更新机制对于对象更新时更具reference...来进行,那么在父组件或子组件对于这一个数据引用均是相同,而不会像基本数据类型存在一个新旧差异,不过这终究是一个workaround。...但是却发现了另一个很有意思属性,也可以达到类型效果。

    1.7K30

    一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

    您可以在ng new此处查看输出表单,或者在您选择IDE打开它。...实际上,Angular为我们提供了一些糖语,我们可以在这里使用它,所以我另一个角度开始解释糖工作原理。...使用本地事件 所以我们有我们变量填充,但我们仍然需要将该发送到AppComponent的卡列表。为了将数据传递给Angular组件,我们必须有输入。...使用模板驱动表单与以前使用简单HTML表单完全相同。如果我们需要更复杂东西,那么在Angular中有一种不同形式:反应式。我们将介绍转换表单他们反应。...在代码定义了反应式表单而不是模板驱动表单,因此我们更改NewCardInput组件代码: [...] import {FormBuilder, FormGroup, Validators} from

    42.6K10

    反应式编程详解

    如图 4 所示: ? [ 图4 反应式编程 ] 反应式系统具有如图所示4个特性: 即时响应性,对用户有反应: 对用户有反应我们才说响应,一般我们说响应,基本上都说得针对跟用户来交互。...示例代码见附件 2.5 过滤 过滤用于 Observable 发射数据中进行选择,其常见操作符如下: debounce —只有在空闲了一段时间才发射数据,通俗说,就是如果一段时间没有操作,就执行一次操作...contains — 判断在发射所有数据项是否包含指定数据 default_if_empty — 如果原始 Observable 正常终止仍然没有发射任何数据,就发射一个默认 sequence_equal...3.3 数据库获取数据 需求描述: MySQL数据库读取用户信息并打印出来 代码如下: ? 3.4 文章信息关联作者名称 需求描述: 将文章信息列表关联作者名称 代码如下: ?...3.5 多线程获取网络地址股票数据 需求描述: 以多线程方式,按列表读取新浪接口美股数据 代码如下: ? 4.

    2.9K30

    7-2.表单-HTML基础

    3.reset-重置按钮 在HTML,reset-重置按钮一般用来清除用户在表单输入内容,它其实也可以看成特殊普通按钮。...重置按钮示例1.png (2)清除范围 重置按钮只能清空它所在form标签内表单内容,对于其所在之外。...重置按钮:一般用来清除用户在表单输入内容。 九、文件上传 在HTML,文件上传也是使用input标签来实现,其中type属性取值为file。...下拉列表 multiple属性没有属性,这是HTML5最新写法,这个与单选框 checked属性是一样。 ② 例2-size属性 <!...option标签selected属性.png selected属性表示列表项是否被选中,它是没有属性,这也是HTML5最新写法,跟单选框checked属性是一样

    2.3K21
    领券