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

Angular 4更新后重置表单-保留ngModel值(使用ngForm)

Angular 4更新后重置表单-保留ngModel值(使用ngForm)

在Angular 4中,可以使用ngForm指令来管理表单,并且可以通过重置表单来清除用户输入的值。但是,如果想要在重置表单后保留ngModel的值,可以按照以下步骤进行操作:

  1. 在HTML模板中,使用ngForm指令包裹整个表单,并给表单添加一个本地引用变量,例如#myForm。
代码语言:txt
复制
<form #myForm="ngForm">
  <!-- 表单控件 -->
</form>
  1. 在组件中,使用@ViewChild装饰器来获取表单的引用,并在重置表单时保留ngModel的值。
代码语言:txt
复制
import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  @ViewChild('myForm') myForm: NgForm;

  resetForm() {
    this.myForm.resetForm({ value: this.myForm.value });
  }
}
  1. 在重置表单的方法中,调用resetForm()方法,并传入一个对象作为参数,该对象的value属性设置为当前表单的值。
  2. 这样,在重置表单后,ngModel的值将会被保留。

关于Angular表单的更多信息,可以参考腾讯云的相关产品和文档:

  • Angular表单:介绍了Angular中的表单处理方法和相关概念。
  • 腾讯云云开发:提供了一站式的云开发平台,包括前端开发、后端开发、数据库等功能,方便开发者快速构建应用。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 指南- 表单

一路上你将学习如何: 用组件和模板构建一个Angular表单使用ngModel创建读取和写入输入控制的双向数据绑定。 跟踪状态变化和表单控件的有效性。...用户输入显示如何使用事件绑定监听DOM事件以及如何使用显示的值更新组件属性。 现在您需要同时显示,聆听和提取。...任何唯一将会这样做,但使用描述性名称是有帮助的。 将[(ngModel)]与表单结合使用时,定义ngControl指令是一项要求。...跟踪控制状态 Angular表单控件可以告诉您用户是否触摸了该控件,是否改变,或者该是否失效。...文本字段变为空白,如果您更改了power,它将恢复为默认。 用ngSubmit提交表单 用户应该能够在填写表单提交这个表单

17.4K30

Angular系列教程-第四节

1.表单 Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径 使用’@angular/forms’库中的FormGroup, FormControl,FormArray...等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动的表单是我们实例化好一个类的数据之后,在html中使用 NgForm 指令将数据和表单进行绑定,使用[(ngModel...和更新) formgroup使用 表单提交 更新部分内容(patchValue) 表单验证(导入Validators,设置字段属性) 表单状态(status) formarray(管理任意数量控件...) 表单验证 同步验证器和异步验证器 备注:同步验证先执行,异步验证执行 3.模板驱动表单使用 导入formcontrol 使用ngModel实现双向绑定 使用模板变量来获取表单 4

2.8K50

Angular 2 表单(下)

使用 ngModel 进行双向数据绑定 接下来我们使用 ngModel 进行双向数据绑定,通过监听 DOM 事件,来实现更新组件的属性。...修改 app/site-form.component.html ,使用 ngModel 把我们的表单绑定到模型。...每一个 input 元素都有一个 name 属性, Angular表单模块需要使用它为表单注册控制器。 运行以上实例输出结果如下: {{diagnostic}} 只是用于测试时候输出数据使用。...我们还可以通过 ngModel 跟踪修改状态与有效性验证,它使用了三个 CSS 类来更新控件,以便反映当前状态。...通过 ngSubmit 来提交表单 我们可以使用 Angular 的指令 NgSubmit 来提交表单, 并且通过事件绑定机制把它绑定到 SiteFormComponent.submit() 方法上。

1.6K10

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

响应式表单 建立表单 由组件隐式的创建表单控件实例 在组件类中进行显示的创建控件实例 表单验证 指令 函数 在表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新,...在使用 ngModel 进行模板绑定时,angular 在 form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单中带有 ngModel 指令和 name 属性的元素,而...name 属性则是 angular 用来注册控件的 key,所以在表单使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件的状态 在表单使用 ngModel...通过使用 FormControl 控件的 value 属性,可以获得当前表单控件的一份数据拷贝,通过 setValue 方法则可以更新表单的控件 import { Component, OnInit...某些情况下,我们只是想要更新控件组中的某个控件的数据,这时需要使用 patchValue 的方式进行更新 import { Component, OnInit } from '@angular/core

18.9K20

Angular 内容投影

在介绍 content projection 之前,我们先来观察一下以下的表单。对于同一个系统来说,下面的两个表单的区别在于使用不同的标题。...答案是可以的,在 Angular 中引入了内容投影的概念,即通过使用 指令来实现内容投影的功能。 ?...select 属性 如果你已经理解了上面的内容,那我们继续,假设对于注册表单,”提交“ 按钮的名称我们想改为 ”注册“,而登录表单的 ”提交“ 按钮,我们想改为 ”登录“。...同时根据 AuthRememberComponent 组件中 checkbox 的来控制是否显示 ”保持登录30天“ 的提示消息。...> ` }) export class AppComponent { // ... } 接着我们需要在 AuthFormComponent 组件中引入 ContentChildren 装饰器,更新

2.5K20

AngularDart4.0 指南- 模板语法二 顶

单击按钮通过双向绑定更新AppComponent.fontSizePx。 修改的size流向样式绑定,使显示的文本变大或变小。...NgModel - 与[(ngModel)]形成元素的双向绑定 在开发数据输入表单时,通常都会显示数据属性,并在用户进行更改时更新该属性。 使用NgModel指令进行双向数据绑定使得这一切变得简单。...电话按钮点击处理程序将输入传递给组件的callPhone方法。但是一个指令可以改变这种行为,并将其设置为别的东西,比如本身。 NgForm指令这样做。 以下是Forms指南中表单示例的简化版本。...heroForm的是什么? heroForm是一个Angular NgForm指令的引用,可以跟踪表单中每个控件的和有效性。 原生元素没有form属性。...对于这些小型转换来说,Angular 管道是一个很好的选择。 管道是简单的函数,它接受一个输入并返回一个转换

29.9K20

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

首先需要操作表单的模块引入这两个模块; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ---- 表单控件响应的几种状态...---- 模板驱动 模板驱动:主要是依赖[(ngModel)]和#scope_var以及原生表单控件属性(require,minlenght,maxlength等)来操作表单的那的亦或者校验 一个最简单的例子...--testform这个局部变量保存了表单的所有相关信息--> <!...(Reactive Form) 响应式表表单:原理是一开始就构建整个表单表单通过特殊指令formControlName一一关联(类似ngModel); 相关名词: FormGroup: 用来追踪表单控件有效状态及...FormArray()),FormGroup()内置多种校验方式 formControlName: 同步与FormGroup构建表单内相同字段的

3.8K20

AngularDart4.0 英雄之旅-教程-03英雄编辑器

', 刷新浏览器,页面将显示标题和英雄名 双大括号是Angular绑定语法。 这些插绑定将组件的标题和英雄属性作为字符串显示在HTML标题标签内。...文本框应显示英雄的名称属性,并根据用户类型更新该属性。 您需要在表单元素和hero.name属性之间进行双向绑定。...在表单和模板语法页面中阅读有关ngModel的更多信息。 @Component(指令:...) 不幸的是,在这个变化之后,应用程序中断!...你走过的路 保留你已构建的代码 “Tour of Heroes”应用程序使用双重大括号插(一种单向数据绑定)来显示Hero对象的应用程序标题和属性。...您使用Dart的模板字符串编写了多行模板,以使模板可读。 您使用内置的ngModel指令向元素添加了双向数据绑定。 此绑定显示Hero的名称,并允许用户更改它。

3.2K10

Angular Input和Output

: ${event}`; } } 双向绑定 在介绍双向绑定之前,我们先来说个需求:即在 CounterComponent 子组件 count 发生变化的时候,需同步更新 AppComponent...通过上面的实例,我们知道我们可以在 AppComponent 父组件中监听 CounterComponent 子组件的 change 事件,然后在 change 事件中更新 initialCount 的...ngModel 使用Angular 1.x 的读者,应该很熟悉 ng-model 这个指令,我们通过它来实现数据的双向绑定。那么在 Angular 中有对应的指令么 ?...class AppComponent { username: string = ''; } ngModel表单验证示例 import { Component } from '@angular/core...实例,进行获取控件的状态,控件状态分类如下: valid - 表单有效 pristine - 表单未改变 dirty - 表单已改变 touched - 表单已被访问过 untouched -

2.3K50

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

对象会被 NgModel 指令隐式创建(译者注:可查看 Angular 源码这一行): @Directive({ selector: '[ngModel]...writeValue 方法设置原生表单控件的(译者注:你可能会参考 L186 和 L41);使用 registerOnChange 方法来注册由每次原生表单控件值更新时触发的回调函数(译者注:你可能会参考这三行...,L186 和 L43,以及 L85),你需要把更新传给这个回调函数,这样对应的 Angular 表单控件也会更新(译者注:这一点可以参考 Angular 它自己写的 DefaultValueAccessor...,每当原生控件值更新Angular 表单控件更新 valueAccessor.registerOnChange((newValue: any) => { control.setValue...// and set this value to the native control // 设置 Angular 表单控件值更新监听器,每当 Angular 表单控件值更新,原生控件更新

3.7K20

angularjs 表单验证

最小长度 验证表单输入的文本长度是否大于某个最小,在输入字段上使用指令ng-minleng= "{number}": 3...最大长度 验证表单输入的文本长度是否小于或等于某个最大,在输入字段上使用指令ng-maxlength="{number}": <input type="text" ng-maxlength="20"...ngModel从DOM中读取的会被传入$parsers中的函数,并依次被其中的解析器处理。这是为了对进行处理和修饰。 备注:ngModel....value(字符串):value参数是我们想要赋值给ngModel实例的实际。 这个方法会更新控制器上本地的$viewValue,然后将传递给每一个$parser函数(包括验证器)。...当值被解析,且$parser流水线中所有的函数都调用完成会被赋给$modelValue属性,并且传递给指令中ng-model属性提供的表达式。

6.6K70

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

(isDisabled: boolean): void; } writeValue:在初始化的时候将formControl的传递给原生表单控件(即,将模型中的新写入视图或 DOM 属性中); registerOnChange...:用来获取原生表单控件的值更新时通知Angular表单控件更新的函数(即,设置当控件接收到 change 事件,调用的函数) registerOnTouched:用来获取通知用户正在交互的函数(即,设置当控件接收到...touched 事件,调用的函数)。...- 用于 select 选择控件 - CheckboxControlValueAccessor - 用于 checkbox 复选控件 至于原生表单控件和Angular表单控件能够保持一致的原理,可以看下... 参考资料 Angular 4.x 自定义表单控件 【荐】深入Angular自定义表单控件 Angular集成Editor.md的Markdown编辑器,支持NgModel

5.2K20

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

Angular CLI告诉我们它app.module.ts为我们更新了。...如果您以前曾使用过AngularJS,那么您可能会知道双向数据绑定的概念。或者,您可能已经在所有那些华丽的AngularJS演示中看到了它,您可以在其中输入要输入的并为我们更新页面内容。...使用表单Angular使用表单有两种方法 - 一种是模板驱动的,我们已经在使用其中最有价值的部分:ngModel用于双向绑定。但是Angular的形式不仅仅关于模型的价值,也关系到有效性。...使用它,我们可以访问由模板引用标记的任何元素 - 在这种情况下,我们的表单,我们实际上声明它是我们的组件公共变量形式,所以我们可以写this.form.valid。...使用模板驱动的表单与以前使用简单的HTML表单完全相同。如果我们需要更复杂的东西,那么在Angular中有一种不同的形式:反应式。我们将介绍转换表单他们的反应。

42.5K10

Angular 5.0.0发布!

构建优化器 5.0.0开始,通过CLI执行的产品构建默认使用构建优化器。 构建优化器是CLI中的一个工具,它基于我们对你Angular应用的理解,可以把构建的包变得更小。 构建优化器有两个主要任务。...保留空白 过去编译器会忠实地复现并在模板中包含制表符、换行符和空白。现在你可选择是否在组件和应用中包含空白了。 可以在每个组件的装饰器中指定这个配置,而当前的默认为true。...Angular表单添加updateOn Blur/Submit 这样可以根据 blur或 submit来运行验证和更新的逻辑了,不必再单纯依赖input事件。...表单对应用很重要,如果有服务端验证,或者验证或更新会触发较慢的操作,你当然希望它少跑几次。现在你可以在控件层面控制验证和更新的时机了,也可以在表单层面设置。...模板驱动的表单 以前 以后 <input name="firstName" ngModel [ngModelOptions]="{updateOn

4.4K40

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券