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

angular 5,reactive form-重置所需的表单控件不会重置输入下的所需错误

Angular 5是一种流行的前端开发框架,它提供了一套完整的工具和组件,用于构建现代化的Web应用程序。Reactive Form是Angular中的一种表单处理机制,它基于响应式编程的思想,可以方便地处理表单的输入验证和状态管理。

在Angular中,重置表单控件的方法是使用reset()函数。当调用该函数时,表单控件的值将被重置为初始值,并且所有的错误状态也将被清除。

下面是一个示例代码,展示了如何在Angular 5中重置表单控件:

代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <input type="text" formControlName="name" placeholder="Name">
      <div *ngIf="name.invalid && (name.dirty || name.touched)">
        <div *ngIf="name.errors.required">Name is required.</div>
      </div>
      <button type="submit">Submit</button>
      <button type="button" (click)="resetForm()">Reset</button>
    </form>
  `,
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;

  constructor() { }

  ngOnInit() {
    this.myForm = new FormGroup({
      name: new FormControl('', Validators.required),
    });
  }

  onSubmit() {
    // 处理表单提交逻辑
  }

  resetForm() {
    this.myForm.reset();
  }

  get name() {
    return this.myForm.get('name');
  }
}

在上面的示例中,我们创建了一个名为myForm的表单,并添加了一个名为name的文本输入框。我们使用Validators.required验证器来确保该输入框不能为空。当输入框的值为空且表单被提交时,会显示一个错误消息。

在模板中,我们使用formControlName指令将输入框与表单控件关联起来,并使用*ngIf指令来根据控件的错误状态显示错误消息。

当点击"Reset"按钮时,会调用resetForm()函数,该函数会重置表单控件的值和错误状态。

关于Angular 5的更多信息和详细介绍,您可以参考腾讯云的官方文档:Angular 5 - 腾讯云

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

相关·内容

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

一、Overview angular 入坑记录笔记第三篇,介绍 angular表单控件相关概念,了解如何在 angular 中创建一个表单,以及如何针对表单控件进行数据校验。...四、Step by Step 4.1、表单简介 用来处理用户输入,通过从视图中捕获用户输入事件、验证用户输入是否满足条件,从而创建出表单模型修改组件中数据模型,达到获取用户输入数据功能 模板驱动表单...4.2.3、数据有效性验证 某些时候需要对于用户输入信息做有效性验证,此时可以在控件上添加上原生 HTML 表单验证器来设定验证条件,当表单控件数据发生变化时,angular 会通过指令方式对数据进行验证...,从而生成错误信息列表 在进行用户输入数据有效性验证时,在控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板中获取到指定控件状态信息,之后就可以通过获取错误信息列表来进行反馈 <div...4.4、表单自定义数据验证 4.4.1、自定义验证器 在很多情况,原生验证规则无法满足我们需要,此时需要创建自定义验证器来实现 对于响应式表单,我们可以定义一个方法,对控件数据进行校验,之后将方法作为参数添加到控件定义处即可

18.9K20
  • 详细介绍 AngularJS 表单各种特性、用法和最佳实践

    每个表单控件都有与之关联数据模型,可以通过这些数据模型获取和修改用户输入值。表单控件类型input:文本框,用于输入文本、数字等。textarea:多行文本框,用于输入长文本。...表单控件属性ng-model:绑定输入数据模型。ng-disabled:设置控件是否禁用。ng-required:设置控件是否必填。...表单验证AngularJS 提供了丰富表单验证机制,用于验证用户输入数据是否满足特定要求。内置验证指令ng-required:设置控件是否必填。...ng-minlength 和 ng-maxlength:设置输入最小和最大长度。ng-pattern:设置输入正则表达式验证。显示验证信息$error:用于检查控件是否有错误。...5. 总结AngularJS 表单提供了丰富特性和功能,包括表单控件类型、属性和验证指令,以及条件显示/隐藏字段、禁用/启用按钮等交互性操作。

    21130

    HTML中表单

    当用户填写完信息后做提交操作,将表单信息从客户端浏览器传送到服务器上,经过服务器处理后,再将用户所需信息传送回客户端浏览器上。...在网页中,最常见表单形式有文本框,密码文本框,单选按钮,复选框,按钮(普通,提交,重置),文件域或图像域,文本域和列表(菜单)。 表单标记是。...表单是网页上一个特定区域,这个区域通过双标记声明,相当于表单容器,在与之间一切都是表单内容,包括所有的表单控件,还有其他伴随数据。...7.重置按钮: 单击重置按钮后,可以清楚表单内容,恢复默认内容。 例如: ? 在浏览器中打开,效果如图: ?...文件域在上传文件时经常被用到,用于查找硬盘中文件,然后通过表单将选中文件上传。在邮件附件,上传头像,发送文件经常使用这个控件。 例如: ? 在浏览器中打开,效果如图: ?

    5.3K20

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

    今天小课堂主要内容是,input表单应用,还有在html5中新增属性。 表单元素是允许用户在表单中(比如:文本域,下拉列表,单选框,复选框等等)输入信息元素,最主要作用就是收集信息。...表单控件:包含了具体表单功能项 3. 表单域:容纳所有表单控件和提示信息 常用表单元素,包括: 1. form: 定义供用户输入表单。 2. fieldset: 定义域。...5. button:普通按钮。 6. submit:提交按钮,每出现一次,一个 Submit 对象就会被创建。 7. reset:重置按钮,会重置当前表单中全部内容。...5. color : 选择颜色控件。 6. date : 选择年月日控件。...4. formmethod:表明使用GET还是POST,能覆盖form表单method。仅在type为image或submit,且上面的form特性被设置情况才能使用。

    3.4K30

    AngularJS中使用表单输入应用设计

    Angular中使用表单元素非常方便。正如我们在前面几个例子中看到,你可以使用ng-model属性把元素绑定到你模型属性上。...同时,在一开始时候我们会把文本框默认值设置为0: 但是,以上代码所采取策略有一个潜在问题,即,只有当用户在文本框中输入时候我们才会去计算所需金额。...下面运用这一技术重写StartUpController: 但是,以上代码所采取策略有一个潜在问题,即,只有当用户在文本框中输入时候我们才会去计算所需金额。...对于处理其他事件情况,例如提供非表单提交型交互,Angular提供了一些事件处理指令,它们类似于浏览器原生事件属性。...我们可以试着实现一个这样功能:再次扩展开始那个计算器,为它添加一个复位按钮,这个按钮将会把输入重置为0:

    2.1K60

    五年 Web 开发者 star github 整理说明

    有时候想查阅以前star库,但不好找,github大多库都是英文说明,对中文开发者不太友好,这里整理收集github库,方便需要时候查阅。...h5开发框架 devbridge/jQuery-Autocomplete 输入框自动完成库 dyve/jquery-autocomplete 输入框自动完成库 xdan/autocomplete...输入框自动完成库 twitter/typeahead.js twitter出品输入框自动完成库 formvalidation/formvalidation 表单检验库 aui / art-template...dcloudio/mui 移动端开发框架 h5bp/mobile-boilerplate 移动端快速开发模版 angular/angular.js 现代化组件化开发框架 expressjs/express...日期控件 arshaw/xdate 日期控件 cubiq/iscroll 前端处理滑动工具库(在ios上总能碰到奇葩问题) twbs/bootstrap 第一个h5 ui框架 jashkenas

    8.9K50

    表单脚本

    ;等价于HTML中action特性 elements 表单中所有控件集合(HTMLCollection) enctype 请求编码类型;等价于HTML中enctype特性 length 表单控件数量...">Submit Form 方式3:图像按钮 只要表单中存在上面列出任何一种按钮,那么在相应表单控件拥有焦点情况...focus:当前字段获取焦点时触发 表单错误提示流程:利用focus事件修改文本框背景颜色,以便清楚表明这个字段获取了焦点;利用blur事件恢复文本框背景颜色;利用change事件在用户输入了非规定字符时提示错误...-- 显示5个字符(input 元素宽度),输入不能超过10个字符--> (2...初始值必须放在这里 上述两种文本框,都会将用户输入内容保存在value属性中!!! 1.

    4.8K41

    定义多场景表单

    定义多场景表单 下面是一个带有添加/编辑文章表单示例: namespace app\forms; use Yii; use app\models\Article; class ArticleForm...'], ]; } //定义不同场景所需要校验表单属性 public function scenarios(){ return [ //添加,需要标题、分类、内容 self...,add方法就是添加文章业务逻辑,edit方法是编辑文章咯,可是两个业务要验证用户端输入参数都包含了title和content,所以要通过scenarios方法来声明两个场景要校验属性名称 当执行...validate时候,底层会自动在rules找到相关规则进行校验,不会对无关属性规则进行校验 控制器调用示例 public function actionAdd(){ $form = new ArticleForm...'; }else{ return $form->firstError[0]; } } 如果表单定义了多场景,执行add或edit这些业务处理方法前(其实是validate被执行之前),一定要先设定

    44741

    Angular6自定义表单控件方式集成Editormd

    曾经找到过“Editor.md”,看之心喜,一直想在Angular中集成这款markdownpad编辑器玩,在网上也只找到一篇通过指令集成,虽然可以实现,但还是希望能做成组件形式,之后看到一篇自定义组件文章...:用来获取原生表单控件值更新时通知Angular表单控件更新函数(即,设置当控件接收到 change 事件后,调用函数) registerOnTouched:用来获取通知用户正在交互函数(即,设置当控件接收到...明确来说,那些原生表单控件都有其对应ControlValueAccessor,比如: - DefaultValueAccessor - 用于 text 和 textarea 类型输入控件 - SelectControlValueAccessor...- 用于 select 选择控件 - CheckboxControlValueAccessor - 用于 checkbox 复选控件 至于原生表单控件Angular表单控件能够保持一致原理,可以看下... 参考资料 Angular 4.x 自定义表单控件 【荐】深入Angular自定义表单控件 Angular集成Editor.mdMarkdown编辑器,支持NgModel

    5.2K20

    表单常用控件有哪些_html表单控件样式修改

    disbled属性 规定输入字段是禁用,被禁用元素是不可以用和不可以点击,被禁用元素不会被提交。...H5新增表单特性 placeholder   输入框提示信息   autocomplete 是否保存用户输入值(默认为on,关闭提示选择off)   autofocus    指定表单获取输入焦点...浏览器下有作用) 表单控件 button 定义可点击按钮(一般用于通过javascript启动脚本) checkbox 定义复选框 file 定义输入字段和“浏览”按钮,供文件上传。...重置按钮会清除表单所有数据 submit 定义提交按钮。提交按钮会把表单数据发送到服务器 text 定义单行输入字段,用户可在其中输入文本,默认宽度为20个字符。...H5新增控件 email 电子邮箱文本框,跟普通没什么区别(当输入不是邮箱时候,验证通不过; 移动端键盘会有变化) tel 电话号码 tel主要功能在移动端,一个键盘切换 url

    3.9K20

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

    首先需要操作表单模块引入这两个模块; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ---- 表单控件响应几种状态...---- 模板驱动 模板驱动:主要是依赖[(ngModel)]和#scope_var以及原生表单控件属性(require,minlenght,maxlength等)来操作表单值亦或者校验 一个最简单例子...testform.submitted)"> 您输入值有误,请重新输入 提交 复制代码 有两种方式处理来对上面的表单做校验...; 在Submit()函数内,在点击提交时候对整个表单一一去判断,传统方式基本这样 每个控件输入时候对应去触发对应事件做校验,比如[ngModelChange]来处理双向绑定值校验 ---- 数据驱动...(Reactive Form) 响应式表表单:原理是一开始就构建整个表单表单值通过特殊指令formControlName一一关联(类似ngModel); 相关名词: FormGroup: 用来追踪表单控件有效状态及值

    3.8K20

    AngularDart4.0 指南- 表单

    表单是商业应用程序主流。您可以使用表单登录,提交帮助请求,订单,预订航班,安排会议,并执行无数其他数据录入任务。...一路上你将学习如何: 用组件和模板构建一个Angular表单。 使用ngModel创建读取和写入输入控制值双向数据绑定。 跟踪状态变化和表单控件有效性。...使用ngModel双向数据绑定语法将数据属性绑定到每个表单控件。 为每个表单输入控件添加一个ngControl指令。 添加自定义CSS来提供视觉反馈。 显示和隐藏验证错误消息。...顺便说一句,您可以注入数据服务来获取和保存真实数据,或者将这些属性作为输入和输出(请参阅“模板语法”页面中输入和输出属性)来绑定到父组件。 这不是现在问题,这些未来变化不会影响表单。...输入控件(通过模板引用变量访问)valid 属性,用于检查控件有效性以及显示/隐藏错误消息。 NgForm.form有效性来设置提交按钮启用状态。

    17.5K30

    Vue3中表单相关知识:表单绑定、表单验证、表单处理

    下面是一些常用表单验证技术:必填字段验证在某些情况,我们希望用户必须填写特定字段。Vue3中可以通过设置HTML5required属性或使用自定义验证规则来实现必填字段验证。...自定义验证在某些情况,我们可能需要根据特定业务需求进行自定义表单验证。Vue3允许我们编写自定义验证方法,并将其应用到表单元素上。...获取表单数据在Vue3中,我们可以使用ref或reactive来定义表单数据,并通过访问对应引用变量来获取用户输入数据。...当用户点击提交按钮时,onSubmit方法会被调用,我们可以通过name.value获取用户输入姓名。表单重置在某些情况,我们需要在用户提交表单后将表单重置为初始状态。...当用户点击重置按钮时,我们可以通过将name重置为空字符串来实现表单重置。总结Vue3提供了强大而灵活表单处理功能,使得我们能够轻松地创建、验证和获取表单数据。

    2.5K31

    HTML 入门笔记 - 初识HTML

    在浏览器中显示结果: ? 使用提交按钮,提交数据 在表单中有两种按钮可以使用,分别为:提交按钮、重置。这一小节讲解提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮。...在浏览器中显示结果: ? 使用重置按钮,重置表单信息 当用户需要重置表单信息到初始时状态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。...在浏览器中显示结果: 输入账号 ? 单击重置按钮 ? form表单label标签 小伙伴们,你们在前面学习表单各种控件时候,有没有发现一个标签--label,这一小节就来揭晓它作用。...label标签不会向用户呈现任何特殊效果,它作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。...就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关表单控件上(就自动选中和该label标签相关连表单控件上)。

    6.5K51

    angular浏览器兼容性问题解决方案

    -- 问题:IE浏览器,初始化表单时,触发表单验证 原因:这个是IE问题,IE10+实现了input事件,但是触发时机却是错误。...解决方案: 使用表单reset()重置表单,但是重置操作需要放在setTimeout中,或者通过其他手段将重置操作作为表单初始化时最后一个宏任务执行。...这种方式经验证,最终效果是,初始化表单后,表单输入元素边框闪烁(红色)一。...FAQ里面,而不会把他并入框架),并在对应模块中引用。...IE输入框会因为placeholder为中文而触发表单验证,placeholder改变了也会触发表单验证,所以,有一个讨巧方法,placeholder里面的内容写成英文形式(推荐),但这显然不符合中文产品需求

    3K30
    领券