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

Angular2窗体重新加载,而不是调用onSubmit()

(),可以通过以下步骤实现:

  1. 在Angular2中,窗体重新加载可以通过重置表单的方式来实现。可以使用Angular的Reactive Forms或Template-driven Forms来处理表单。
  2. 如果使用Reactive Forms,可以在组件中创建一个FormGroup对象,并将其与表单控件绑定。当需要重新加载窗体时,可以通过调用FormGroup的reset()方法来重置表单。
代码语言:typescript
复制

import { Component, OnInit } from '@angular/core';

import { FormGroup, FormControl } from '@angular/forms';

@Component({

代码语言:txt
复制
 selector: 'app-form',
代码语言:txt
复制
 template: `
代码语言:txt
复制
   <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
代码语言:txt
复制
     <!-- 表单控件 -->
代码语言:txt
复制
   </form>
代码语言:txt
复制
 `

})

export class FormComponent implements OnInit {

代码语言:txt
复制
 myForm: FormGroup;
代码语言:txt
复制
 ngOnInit() {
代码语言:txt
复制
   this.myForm = new FormGroup({
代码语言:txt
复制
     // 定义表单控件
代码语言:txt
复制
   });
代码语言:txt
复制
 }
代码语言:txt
复制
 onSubmit() {
代码语言:txt
复制
   // 处理表单提交
代码语言:txt
复制
 }
代码语言:txt
复制
 reloadForm() {
代码语言:txt
复制
   this.myForm.reset();
代码语言:txt
复制
 }

}

代码语言:txt
复制
  1. 如果使用Template-driven Forms,可以在模板中使用ngForm指令,并通过给表单元素添加ngModel指令来绑定表单控件。当需要重新加载窗体时,可以通过调用ngForm的resetForm()方法来重置表单。
代码语言:html
复制

<form #myForm="ngForm" (ngSubmit)="onSubmit()">

代码语言:txt
复制
 <!-- 表单控件 -->

</form>

代码语言:txt
复制
代码语言:typescript
复制

import { Component, ViewChild } from '@angular/core';

@Component({

代码语言:txt
复制
 selector: 'app-form',
代码语言:txt
复制
 template: `
代码语言:txt
复制
   <form #myForm="ngForm" (ngSubmit)="onSubmit()">
代码语言:txt
复制
     <!-- 表单控件 -->
代码语言:txt
复制
   </form>
代码语言:txt
复制
 `

})

export class FormComponent {

代码语言:txt
复制
 @ViewChild('myForm') form: NgForm;
代码语言:txt
复制
 onSubmit() {
代码语言:txt
复制
   // 处理表单提交
代码语言:txt
复制
 }
代码语言:txt
复制
 reloadForm() {
代码语言:txt
复制
   this.form.resetForm();
代码语言:txt
复制
 }

}

代码语言:txt
复制
  1. 在需要重新加载窗体的地方,调用reloadForm()方法即可重新加载窗体。
代码语言:html
复制

<button (click)="reloadForm()">重新加载窗体</button>

代码语言:txt
复制

这样,当点击"重新加载窗体"按钮时,窗体将会被重置,所有表单控件的值将会被清空,以实现窗体的重新加载。

对于Angular2窗体重新加载的应用场景,可以是在用户提交表单后,需要清空表单并重新加载以便用户进行下一次输入的情况。

腾讯云提供了丰富的云计算产品,其中与Angular2窗体重新加载相关的产品包括:

  • 腾讯云云服务器(CVM):提供可靠、高性能的云服务器实例,可用于部署Angular应用程序。产品介绍链接
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的对象存储服务,可用于存储Angular应用程序中的静态资源。产品介绍链接
  • 腾讯云云数据库MySQL版(TencentDB for MySQL):提供高可用、可扩展的云数据库服务,可用于存储Angular应用程序中的数据。产品介绍链接

请注意,以上仅为示例产品,实际选择产品时应根据具体需求进行评估和选择。

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

相关·内容

【开发指南】(三)认识ionic3

三者简单说明如下: 原生开发就是用原生支持的开发语言,调用原生SDK开发; 加壳在线WebApp是在一个WebView容器执行,网页部署在服务器,基本不调用原生功能; 混合式开发,如果有了解过一些的话...Hybird应用Cordova技术,它只提供了使用JavaScript调用Native功能,在开发的时候还需要开发人员自己去实现诸如样式美化、页面切换、数据展示、弹出框、Modal窗体、日期选择器等功能或组件...由于AngularJS 1.x版本在性能上已经很难有较大提升,后来微软和google联合推出了全新设计的基于TypeScript的Angular2,这是对于原始版本完全的重写。...等到angular2的更新到了一定版本,一些依赖库分属于2和3,为了便于版本的统一管理,直接跳到了angular4,其实angualr2和4两者的变化不算太多。相应的ionic2也同步升级到3。...@IonicPage装饰器 ionic2中导航器不是基于url的,如果想使用url访问就要通过DeepLinker来实现,这是比较麻烦的,而在新版本中可以通过@IonicPage装饰器来实现。

2.7K40

Angular2 VS Angular4 深度对比:特性、性能

Google的Angular团队已于3月23日发布了Angular4,期待已久的Angular2版本则是之前版本的完全重构。...这个Angular版本更加注重于开发移动应用程序,开发人员可以使用它创建跨平台的应用程序,在解决了移动应用程序(功能,加载时间等)的挑战后,Angular2可以更容易的处理桌面组件。...但是,AtScript不是强制性的,开发人员仍然可以选择只使用纯JavaScript / ES5代码来构建Angular应用程序。...提升依赖注入(DI): 依赖注入(一种程序设计模式,可以通过依赖关系实现调用不需要生成)是一种Angular显著区别于其竞争对手的特性。...由于代码依赖于ES6模块,因此模块加载程序将通过在部分组件上引用它们,来加载依赖关系。

8.7K20

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

什么是延迟加载?如何在Angular 2中启用延迟加载? 大多数企业应用程序包含用各式各样的用于特定业务案例的模块。捆绑整个应用程序代码并完成加载,会在初始调用时,产生巨大的性能开销。...如果应用程序较大时,我会考虑延迟加载不是完全捆绑的应用程序。...此外,还可以相对很好地管理shadow DOM,同时检测Angular 2应用的改变,并且可以有效地管理视图的重新绘制。...更快的渲染:如果应用程序不是AOT编译,那么应用程序完全加载时,编译过程会发生在浏览器中。这需要等待下载所有必需的组件,然后等待编译器花费时间来编译应用程序。使用AOT编译,就能实现优化。...如果服务器的HTTP请求结果或其它一些异步操作不再需要,则Observable的订阅者可以取消订阅,Promise将最终调用成功或失败的回调,即使你不需要通知或其提供的结果。

17.3K80

vue.js与其他前端框架的对比

简单来说,Virtual DOM是一个映射真实DOM的JavaScript对象,如果需要改变任何元素的状态,那么是先在Virtual DOM上进行改变,不是直接改变真实的DOM。...这一点Angular2有原生的service injection pattern。Vue则没有官方推荐。 对标准向后兼容Angular2在一些细节上对标准有更好的支持。...Angular2的组件有shadow dom的实现可以选择,Vue目前还没有。...例如,在 Polymer 中唯一支持的表达式只有布尔值否定和单一的方法调用,它的 computed 方法的实现也并不是很灵活。...Riot 使用了 遍历 DOM 树 不是虚拟 DOM,但实际上用的还是脏检查机制,因此和 AngularJS患有相同的性能问题。 更多成熟工具的支持。

4.1K80

实战 | Change Detection And Batch Update

当中调用的,为啥不是批量更新呢?...setTimeout确实是在handleClick当中调用的,但是两个setState可不是在handleClick当中调用的,它们是在传递给setTimeout的参数——匿名函数中执行的,走的是事件轮询...Angular1是通过封装自动调用$apply,但是存在手动调用的场景,为了解决这个问题,Angular2没有采用1的实现机制,转而使用了Zone.js。...Vue Vue模板中每个指令/数据绑定都有一个对应的watcher对象,当数据变化时,会触发watcher重新计算并更新相应的DOM。...由于事件系统用的Vue提供的,是可控的,我们再看下定时器下执行的情况: 打开控制台,点击按钮会发现依旧打印了0 0,有人可能就疑惑了Vue是不是Angular2一样也修改了异步方法的原生实现呢?

3.2K20

ASP.NET Core + Angular 2 Template for Visual Studio服务器端预加载的意义何在?Webpack 开发中间件模块热拔插(HMR)

,这个模板包含一下这些方面: 服务端预加载(预渲染):这样你的UI可以快速的显示,甚至在浏览器下载Javascript之前。...Webpack中间件集成:在开发期间,你不需要一直重新编译你的客户端项目,或者你可以用一个watcher工具在后台帮你做这些事。...一切就绪之后,项目中看起来可能回出现一点问题,但是实际上并不是这样,当VS2015完成安装依赖后将会显示not installed ?...服务端预渲染 在浏览一遍这个站点之后,你会发现一些简单的angluar2 component的例子,这看起来倒不是什么牛逼了的事,但是歧视已经在你看不见的地方发生了一些牛逼拉瞎的事情。...假如你不想使用预加载,可以通过移除在Views/Home/Index.cshtml中的app标签的asp-prerender-module属性来禁用它。

3.3K60

干货 | 前端阶段性总结之「框架相关」那些事

不只是Angular1到Angular2重新设计,甚至是Angular2自身的更新也不全兼容。但不得不说,虽然对用户不是非常友好,其实仔细品味的话,Angular有很多很棒的理念和设计的。...目前来说,收集的更多是Angular1的一些文章吧,但感觉多数都不是很完整的,那这里本骚年就简单分享一下使用的演进吧。...Angular2的话,目前在做2到4版本的升级。作为项目的熟悉过程,现在还不能给出很多的分享,后面或许有空会整理做些笔记吧。...虚拟DOM,本质上是在JS和DOM之间做了个缓存: 用js对象结构表示DOM树结构,并构建真正DOM树 状态变更时,重新构建新DOM树,记录新旧的差异 将差异应用到原有DOM树上 当然,React和...模块化 之前曾经有过像requirejs和seajs等模块化工具,从es6开始支持module之后,无论是模块化、组件化、依赖注入和异步加载等都变得很是简单呢。

93620

Angular2学习记录-给后端程序员的经验分享

这里就要说下个人观点了,安利一波:我认为每个程序员都应该有自己的一个项目,一个可以让你学习的东西能施展到上面的项目,可能该项目一开始很简单,但是随着你不断的学习,不断的把新知识运用进去,这个项目就会伴随着你的成长丰富起来...isAddBackColor(){ if (this.getIsIndex()){ var self = this; //该处使用匿名函数,不是箭头函数....这是因为访问主域名后angular的js都已经全部加载了,这个时候跳转是js来控制的,不经过nginx自然不会出现上面的问题....root /Users/niuli/workspace/web/austoj/dist; index index.html index.htm; } 解决方法: 解决方法就是让其对于路由都去加载...(使用formData对象,调用其append方法添加文件,再使用angular2的http组件post上去)uploadAvatar(file: any): Promise{ let

3K20

C# CheckForIllegalCrossThreadCalls 与Application.DoEvents()

如果加上DoEvents的话就会对文本框的值实时响应,给用户带来较好的用户体验,可是DoEvents也带来了效率上的问题,处理同样的一个事件调用了DoEvents后效率降低了好几倍,这也是为什么要慎用的原因了...该窗体在每次处理事件时,均将处理与该事件关联的所有代码。所有其他事件在队列中等待。在代码处理事件时,应用程序并不响应。例如,当将另一窗口拖到该窗口前面时,该窗口不重新绘制。...例如,如果您有向 ListBox 添加数据的窗体,并将 DoEvents 添加到代码中,那么当将另一窗口拖到您的窗体上时,该窗体重新绘制。...如果从代码中移除 DoEvents,那么在按钮的单击事件处理程序执行结束以前,您的窗体不会重新绘制。 刚开始接触这段话的时候,会读不懂。...我因为不是很懂计时器,我就写了个类似计时器的代码,原理感觉上和他的差不多。

1.2K20

为什么现在的开发者总是拿 Vue.js 和 JavaScript 巨头 Angular、React 比较?

这允许你按照自己的想法来构建你的应用,不是强制按照 Angular 规定的方式去做。它只是一个 UI 层,所以你可以将其作为页面的一个功能来使用,而非一个完整的 SPA。”...Vue.js vs Angular2 Angular2不是一个版本升级,而是一个完全的重写版。Angular2 比 Angular1 更快,Angular2 的 API 也引入了一些激进的变化。...主流的虚拟 DOM 操作会引起重新渲染、依赖优化等问题。...“Vue2.0 通过虚拟 DOM 和响应式的依赖跟踪系统的组合解决了这个问题,所以系统能够自动高效地决策哪些该重新渲染,将开发者从不必要的优化工作中解放了出来”,Vue 的主开发者 Evan You 如是说...但是,也不要忘了,Angular 和 React 在 JavaScript 世界里仍然赫赫有名, Vue 才刚刚崛起。

1.9K30

angular5面试题_大数据面试题

angular2中有了Zone.js。...可以采用如下方式避免 对于只用于展示的数据,使用单向绑定,不是双向绑定; Angular的数据流是自顶下,从父组件到子组件单向流动。单向数据流向保证了高效、可预测的变化检测。...-- 3.绑定方法调用的结果 --> 直接绑定: 大多数情况下,这都是性能最好的方式。 绑定方法调用的结果:在每个脏值检测过程中,classes方程都要被调用一遍。...Module 延迟加载(Lazy-loading) 当一个项目做得很大后,为了提高首屏加载速度,可以通过Lazy-loading,当访问到某些具体的url时,才加载那些不常用的feature module...Promise,无论是否调用then。promise都会立即执行;observables只是被创建,当调用(subscribe)的时候才会被执行。

4.3K20

【资讯】1851- Next.js 14 正式发布,更快、更强、更可靠!

服务端操作(稳定) 如果不想手动创建 API Route,那么可以定义一个函数,在服务端安全地运行,并直接从 React 组件中调用它。...通过表单使用服务端操作对于渐进增强是有帮助的,但并不是必需的。也可以直接将其作为函数调用,而无需使用表单。...缓存、重新验证、重定向等 服务端操作深度集成到整个 App Router 模型中。你可以: 使用 revalidatePath() 或 revalidateTag() 可以重新验证缓存的数据。...new-products" /> 由于 组件需要读取cookie以查看用户会话,因此该组件将作为同一HTTP请求的一部分进行流式传输,与静态骨架一起加载...确保这些meta标签与初始页面内容一起发送可以提供流畅的用户体验,防止由于更改主题颜色或视口变化导致页面闪烁或布局偏移。 在 Next.js 14 中,将阻塞和非阻塞的元数据解耦。

44140
领券