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

Angular 9将表单重置为原始状态,其中一个字段是一个数组

Angular 9中重置表单的原始状态可以使用reset()方法。对于包含数组字段的表单,可以通过以下步骤来重置:

  1. 首先,在组件中引入FormBuilderFormGroup
代码语言:txt
复制
import { FormBuilder, FormGroup } from '@angular/forms';
  1. 在组件类中定义表单和表单控件:
代码语言:txt
复制
export class YourComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      arrayField: [[]] // 定义数组字段并初始化为空数组
    });
  }
}
  1. 在模板中,将表单和表单控件与HTML元素进行绑定:
代码语言:txt
复制
<form [formGroup]="form">
  <div formArrayName="arrayField">
    <div *ngFor="let item of form.get('arrayField').controls; let i = index">
      <input type="text" [formControlName]="i">
    </div>
  </div>
</form>
<button (click)="resetForm()">重置</button>
  1. 在组件类中创建重置表单的方法:
代码语言:txt
复制
resetForm() {
  this.form.reset(); // 重置整个表单
  // 或者只重置数组字段
  // this.form.get('arrayField').reset([]);
}

上述代码中,我们使用FormBuilder来创建表单,使用formGroupformArrayName指令将表单和数组字段与HTML元素进行绑定。在重置方法中,通过调用reset()方法来将整个表单重置为原始状态,或者使用reset()方法将数组字段重置为空数组。

关于Angular表单的更多信息和用法,请参考腾讯云开发者手册中的相关章节:Angular表单

注意:本答案仅针对Angular 9中重置带有数组字段的表单,不包括云计算、IT互联网领域的其他概念或品牌商的信息。

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

相关·内容

AngularDart4.0 指南- 表单

一路上你学习如何: 用组件和模板构建一个Angular表单。 使用ngModel创建读取和写入输入控制值的双向数据绑定。 跟踪状态变化和表单控件的有效性。...指令的exportAs属性告诉Angular如何引用变量链接到指令。 您将name设置“ngForm”,因为ngModel指令的exportAs属性“ngForm”。...使用有效的和原始状态 当用户删除名称时,表单应该如下所示: ?...当控件原始的”时隐藏消息实现了这个目标。 当您向表单添加一个“清除”按钮时,您会看到此选项的重要性。 英雄Alter Ego可选的,所以你可以不用关那个。 英雄power选择必需的。...文本字段变为空白,如果您更改了power,它将恢复默认值。 用ngSubmit提交表单 用户应该能够在填写表单后提交这个表单

17.5K30
  • Angular17 使用 ngx-formly 动态表单

    ngx-formly Angular 应用实现响应式的动态表单框架,不仅支持自动生成表单、易于上手的自定义字段扩展、自定义验证扩展、支持 Formly Schema 和 JSON Schema,还有开箱即用的内置表单主题...-g @angular/cli # 创建 standalone 类型的项目 ng new angular-ngx-formly --standalone=false 安装 NG-ZORRO 组件库...; 使用 Formly 内置验证: 在新用户注册表单的基础上增加输入年龄字段的配置,再为每个字段配置的 props 增加 required 属性,表示这是一个必填的字段,就像新用户注册表单中用户名字段一样...label}仅支持录入中文`, }, }, } 字段添加自定义验证函数: 接着新注册用户表单添加新的字段:邮箱、身份证、手机号,分别非这三个字段自定义校验函数: 全局注册自定义校验函数,...model.password', }, } PS:hide 框架显示提供的属性,props.disabled 继承自组件的属性; 强制显示错误状态: 使用 formState 可以实现字段之间的通信

    65010

    Angular 2 表单(上)

    本章节我们将为大家介绍如何使用组件和模板构建一个 Angular 表单。...利用 Angular 模板,我们可以创建各种类型表单,例如:登录表单,联系人表单,商品详情表单等,而且我们也这些表单字段添加数据校验。 接下来我们一步步来实现表单的功能。...: number ) { } } 以下代码中,标 public 的公有字段,alexa 后添加一个问号(?)表示可选字段。...创建一个表单组件 每个 Angular 表单分为两部分:一个基于 HTML 的模板,和一个基于代码的组件,它用来处理数据和用户交互。...因为模板驱动的表单有它们自己的模块,所以我们得把 FormsModule 添加到本应用的 imports 数组中,这样我们才能使用表单

    1.5K10

    angularjs 表单验证

    数字 验证输入内容是否数字,input的类型设置number: 7....二、表单中控制变量 屏蔽浏览器对表单的默认验证行为 在表单元素上添加novalidate标记即可,问题我们怎么知道我们的表单有哪些字段有效的,那些事非法或者无效的?...$parsers  $parsers的值一个由函数组成的数组,当用户同控制器进行交互,并且ngModelController中的$setViewValue()方法被调用时,其中的函数在当用户同控制器进行交互...$formatters $formatters的值一个由函数组成的数组其中的函数会以流水线的形式在数据模型的值发生变化时被逐一调用。...$viewChangeListeners $viewChangeListeners的值一个由函数组成的数组其中的函数会以流水线的形式在视图中的值发生变化时被逐一调用。

    6.7K70

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

    一、Overview angular 入坑记录的笔记第三篇,介绍 angular表单控件的相关概念,了解如何在 angular 中创建一个表单,以及如何针对表单控件进行数据校验。...数据值和一些对于用户的行为约束(某个字段必须填啊、某个字段长度超过了长度限制啊)绑定到组件的模板中,从而完成与用户的交互 4.2.1、模板驱动表单的双向数据绑定 在根模块中引入 FormsModule...,一个 FormControl 类的实例对应于一个表单控件,在使用时,通过控件的实例赋值给属性,后续则可以通过监听这个自定义的属性来跟踪表单控件的值和状态 import { Component, OnInit...使用 FormBuilder 构建的控件,每个控件名对应的值都是一个数组,第一个控件的默认值,第二项和第三项则是针对这个值设定的同步、异步验证方法 import { Component, OnInit...对于模板驱动表单,同样采用自定义指令的方式进行跨字段的交叉验证,与单个控件的验证不同,此时需要将指令添加到 form 标签上,然后使用模板引用变量来获取错误信息 import { Directive

    18.9K20

    Angular: 最佳实践

    注意我们怎么在组件类上创建一个 statuses 字段,以便我们可以在模版中使用这个枚举。但是假如我们在多个组件中使用这个枚举呢?或者假如我们要在不同的组件使用其他枚举呢?我们需要不停创建这些字段?...如果在你的 Angular 组件中有个表单,你可能有像这样的字段或者方法: @Component({ selector: 'component-with-form', template: `.....表单,那么这些逻辑移动到一个基础类会更友好...但是你不需要继承 AbstractBaseComponent,因为不是每个组件都有 form 表单。...比如,你想在模版中未正确填写表单控件添加 has-error 类(也就是说并非所有的校验都通过)。...本文译文,采用的意译的方式,其中加上个人的理解和注释,原文地址:medium.com/codeburst/a…

    2.8K40

    【AngularJS】 # AngularJS入门

    AngularJS 数组 类似于JavaScript的数组 第三个值 { { points...$error.email">不是一个合法的邮箱地址 应用数据提供状态值 (invalid, dirty, touched, error) <form ng-app=""...过滤器分类 currency: 格式化数字货币格式 filter: 从数组项中选择一个子集 lowercase: 格式化字符串小写 orderBy: 根据某个表达式排列数组 uppercase: 格式化字符串大写...$dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine 表单没有填写记录 基本的表单验证实例,novalidate 用于禁用浏览器默认的验证...AngularJS 依赖注入 依赖注入(DI):一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分。

    23.2K60

    Vue入门---常用指令详解

    Vue入门 Vue一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单、易学上手快,近两年也也别流行,发展速度较快,已经超越Angular了。...一、指令 v-model 多用于表单元素实现双向数据绑定(同angular中的ng-model) v-for 格式: v-for="字段名 in(of) 数组json" 循环数组或json(同angular...    显示与隐藏  (dom元素的删除添加 同angular中的ng-if 默认值false) v-else-if 必须和v-if连用 v-else 必须和v-if连用  不能单独使用  否则报错   ...模板编译错误 v-bind 动态绑定  作用: 及时对页面的数据进行更改 v-on:click 给标签绑定函数,可以缩写@,例如绑定一个点击函数  函数必须写在methods里面 v-text 解析文本...button" value="添加" class="btn btn-primary" v-on:click="add()"> 62 <input type="reset" value="<em>重置</em>

    1.6K10

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

    使用表单Angular中使用表单有两种方法 - 一种模板驱动的,我们已经在使用其中最有价值的部分:ngModel用于双向绑定。但是Angular的形式不仅仅关于模型的价值,也关系到有效性。...哈希#form一个模板引用变量,我们可以用它来访问我们的代码中的表单。...文本中有一个我们字段的名称,一个空字符串初始值,Validators.compose显然允许我们多个验证器合并到一个字段中。我们使用.value并.setValue('')获得我们领域的价值。...State一个单一的,不可变的数据结构 - 至少Ngrx我们实现它的方式。Ngrx由Redux提供灵感的“RxJS支持Angular应用程序的状态管理库”。 Ngrx的灵感来自Redux。...什么NgRX? NgRX一种管理应用程序状态的模式。这是一个支持Angular应用程序的RxJS驱动的状态管理库。

    42.6K10

    如何使用AngularJS和PHP任何位置生成短而独特的数字地址

    这将创建一个包含五个文本字段(及其相应标签)的表单,用户将在其中输入其信息: . . ....在浏览器中再次访问该应用程序,然后在第一个字段中输入状态名称。文本光标移动到下一个字段时,不会显示纬度和经度标签,地图上显示的位置也不会更改以反映您输入的信息。让我们启用这些行为。...常见事件的例子有: 单击HTML按钮 更改输入字段的内容 焦点从一个页面元素更改为另一个页面元素 一个事件监听器一个指令,它讲述了一个程序在特定事件发生采取某种行动。...这一行我们声明geocodeAddress函数的地方。在这下面几行,我们声明一个名为fullAddress的变量,该变量根据用户输入到应用程序表单字段中的信息构造一个人类可读的邮件地址。...在状态字段中输入US-NY然后单击TAB以输入焦点更改为下一个字段。您将看到以下输出: 请注意,您在表单中输入的地理坐标和物理地址显示在地图下方。这使应用程序感觉更具吸引力和交互性。

    13.2K20

    理论 | Angular 中的响应式编程 -- 浅淡 Rx 的流式思维

    首先分析一下需求: 1、年龄可以按岁、月、天单位。 2、其中如果年龄小于等于3个月,按天单位,如果小于等于2岁按月单位,其余情况按岁单位。其实就是考虑幼儿的情况啦。...就这个需求来看的话,年龄和年龄单位这两个数据要一起来考虑, 上图中(由于太懒,后面的合并虚线就没有画了),上面两个流原始数据流,一个年龄的数据流,每次更改年龄数时,这个数据流就产生一个数据:比如一开始初始值...FormGroup; 3、在组件的构造函数中取得 FormBuilder 后(比如下面代码中的 constructor(private fb: FormBuilder) { }),用 FormBuilder 构造表单控件数组并赋值给刚才的类型...这两个数据流其实是来自于两个控件的值的变化,而响应式表单获取值的变化是非常简单的就一行: 上面这行代码的意思表单的控件数组中取得 formControlName  age 的这个控件然后监听其值的变化...这个 else 可以携带一个模版的引用。比如下面例子中:如果用户登录成功显示用户名,否则显示登录链接。 另一个改进 ngIf 中现在可以评估表达式的结果赋值给一个变量,好处是什么呢?

    5.3K10

    【译】.NET Core 3.0 Preview 3中关于ASP.NET Core的更新内容

    ,并运行它,你获得一个基本表单,该表单字段更改和表单提交时自动进行字段输入值的验证。...EditFormEditContext设置一个级联相关的值,该值用于跟踪关于编辑过程的元数据(例如,已修改的内容、当前验证消息等)。...这些组件提供默认行为,用于在编辑时验证并更改它们的CSS类以反映字段状态。...其中一些具有有用的分析逻辑(例如,InputDate和InputNumber将不可解析的值注册验证错误,这样可以优雅地处理它们)。相关字段还支持目标字段的可空性(例如,int?)。...在本节中,我们展示如何创建一个新的Angular或React模板,该模板允许我们对用户进行身份验证并访问受保护的API资源。

    22.7K10

    简化 Django 开发的八个 Python 包 | Linux 中国

    ◈   describe_form 输出模型的表单定义,可以粘贴到   forms.py 文件中。(需要注意的,这种方法创建的普通 Django 表单,而不是模型表单。)...◈   TitleDescriptionModel 和   TitleSlugDescriptionModel:这两个模型包括了   title 和   description 字段其中   description...Django-fsm 模型提供了 FSMField 字段,用来定义模型实例的状态。...它带有一个可选的能过滤垃圾邮件的表单类(也有不过滤的普通表单类)和一个 ContactFormView 基类,基类的方法可以覆盖或自定义修改。而且它还能引导你完成模板的创建,好让表单正常工作。  ...用户注册和认证:django-allauth  django-allauth[19] 一个 Django 应用,它为用户注册、登录/注销、密码重置,还有第三方用户认证(比如 GitHub 或 Twitter

    2.9K20
    领券