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

在angular 6中,表单在I do (ngSubmit)之后不会刷新

在Angular 6中,表单在I do (ngSubmit)之后不会刷新的原因是因为默认情况下,ngSubmit事件会触发表单的提交动作,但不会导致页面刷新。这是因为Angular采用了单页应用(SPA)的架构,通过使用Ajax技术实现页面的局部刷新,提高了用户体验和性能。

要解决表单提交后不刷新的问题,可以采取以下几种方法:

  1. 使用Router导航:在表单提交成功后,通过Router导航到另一个组件或当前组件的刷新路由,以实现页面的刷新。
  2. 使用location.reload()方法:在表单提交成功后,可以使用JavaScript的location.reload()方法来刷新整个页面。
  3. 使用ngIf指令:在表单组件的父组件中添加一个ngIf指令,将表单组件包裹在其中。在表单提交成功后,通过改变ngIf的值来重新渲染表单组件,从而实现刷新效果。
  4. 使用Angular的ChangeDetectorRef服务:在表单提交成功后,可以使用ChangeDetectorRef服务来手动触发变更检测,从而实现页面的刷新。

需要注意的是,以上方法都是通用的解决方案,不仅适用于Angular 6,也适用于其他版本的Angular。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云CDN加速服务。腾讯云云服务器提供稳定可靠的云计算基础设施,可用于部署和运行Angular应用程序。腾讯云CDN加速服务可以加速静态资源的传输,提高页面加载速度,提供更好的用户体验。

腾讯云云服务器产品介绍链接:https://cloud.tencent.com/product/cvm 腾讯云CDN加速服务产品介绍链接:https://cloud.tencent.com/product/cdn

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

相关·内容

AngularDart4.0 指南- 表单 顶

你还没有使用Angular。 没有绑定或额外的指令,只是布局。 模板驱动的表单中,如果已经导入了angular_forms库,则不必为了使用库功能而对标记执行任何操作。...为了达到这个效果,Name 之后立即添加下面的: lib/src/hero_form_component.html (hidden error message) <div [hidden...用ngSubmit提交表单 用户应该能够填写表单后提交这个表单。表单底部的Submit按钮本身不做任何事情,但是由于它的类型(type =“submit”),它会触发一个表单提交。...如果没有Angular的帮助,你需要做什么才能将按钮的启用/禁用状态连接到表单的有效性? 对你来说,这很简单: (增强的)表单元素上定义一个模板引用变量。 多处的按钮中引用该变量。...当您单击编辑按钮时,该消失,并且可编辑的表单重新出现。 概要 Angular表单为数据修改,验证等提供支持。

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

    表单验证 指令 函数 表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新,而响应式表单在表单数据发生变更时,FormControl 实例会返回一个新的数据模型,...,从而生成错误信息列表 进行用户输入数据有效性验证时,控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板中获取到指定控件的状态信息,之后就可以通过获取错误信息列表来进行反馈 <div...在数据验证失败的情况下,对于系统来说,表单是不允许提交的,因此可以将提交事件绑定到表单的 ngSubmit 事件属性上,通过模板引用变量的形式,提交按钮处进行数据有效性判断,当无效时,禁用表单的提交按钮...4.4、表单的自定义数据验证 4.4.1、自定义验证器 很多的情况下,原生的验证规则无法满足我们的需要,此时需要创建自定义的验证器来实现 对于响应式表单,我们可以定义一个方法,对控件的数据进行校验,之后将方法作为参数添加到控件定义处即可...g directive direactives/hero-validate 创建完成指令之后,我们需要将这个指令将该验证器添加到已经存在的验证器集合中,同时为了使这个指令可以与 angular 表单集成在一起

    18.9K20

    在前端中理解MVC服务之 Angular篇(完结)

    第三篇文章中,应用程序将使用 Angular 构建,该版本来自TypeScript 的第二个版本。因此,本文介绍应用程序从 TypeScript 到Angular的迁移。...最后,最后一篇文章中,我们将转换代码以将其与 Angular 框架集成。 第 1 部分。了解前端的 MVC 服务:VanillaJS 点击直达 第 2 部分。...('users', JSON.stringify(users)); } 此方法不会调用创建服务时绑定的函数, JavaScript 或 TypeScript 中开发时callback是必需的,因为...Angular 执行此任务,Cont和Model之间执行绑定。...还必须注意的是,本文中,我们将应用程序从 TypeScript 迁移到了 Angular,让我们忘记了那些与我们开发的所有 Web 应用程序都相同的重复任务。

    4.1K20

    构建具有用户身份认证的 Ionic 应用

    Ionic 2 一月份发布, 可以使用 Angular 开发 Ionic 应用。 Ionic 3 四月份发布,允许使用 Angular 4 进行开发。...你可以退出之后看一下带标识的登录页。 ? 注意: 你可能注意到退出之后标签页并没有消失。我正在查找 没有正常工作 的原因。 发布到移动设备 使用 Ionic 浏览器中开发移动应用是非常酷的事情。...如果你登录页输入凭证,可能什么也不会发生。打开 Safari 转到 Develop > Simulator > MyApp / Login,你会看到控制台有一条错误信息。...我相信使用 Cordova 打包 app 之后不会正常工作,因为通过内嵌的 iframe 向服务端发送请求,然后使用 postMessage 将结果返回当前窗口。...= 0; i < responseParameters.length; i++) { parsedResponse[responseParameters[i].split('

    23.8K00

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

    一些合法的HTML模板中没有多大意义。 ,和元素没有用处。 剩下一切都是一致的。 您可以使用组件和指令出现的新元素和属性来扩展模板的HTML词汇。...Angular的早期教程中,你遇到了插值的双曲括号{{and}}。...Angular可能会或可能不会显示更改的值。Angular可能会检测到更改并发出警告错误。通常来说,保留数据属性和方法返回值就够了。...Dart 2.0注意:检查模式不会出现在飞镖2.0。 有关更多信息,请参阅Dart 2.0更新。 记住括号 括号告诉Angular评估模板表达式。...这个初始值永远不会改变。 一次性字符串初始化标准HTML中是常规的,并且它对于指令和组件属性也同样适用。

    5.2K10

    Angular v18 现已推出!

    与此同时,我们还用新的 Material 3 主题和文档刷新了 material.angular.io。您可以我们的指南中找到如何在您的应用程序中使用 Angular Material 3!...有一个主要的障碍是让更多的人利用水合作用——缺乏 i18n 支持。与 Chrome Aurora 团队合作后,我们很高兴地与大家分享,i18n 块的水合作用功能在 v18 的开发者预览模式下可用!...从 v18 开始,事件调度使用混合渲染时为事件回放提供支持。大多数开发人员不会直接与事件调度进行交互,因此让我们研究一下为什么事件回放很有用。您可以在下面找到一个简单的电子商务网站的模拟。...Firebase 今年的 Google I/O 大会上宣布了 App Hosting。...在过去的 6 个月中,我们从人们那里收集了更多反馈,并完善了更新体验,使每个人都能够迁移到新的构建体验并获得编辑/刷新提升。您可以我们的更新指南中找到我们开发的工具,以自动执行更新体验。

    23310

    构建具有用户身份认证的 Ionic 应用

    Ionic 2 一月份发布, 可以使用 Angular 开发 Ionic 应用。 Ionic 3 四月份发布,允许使用 Angular 4 进行开发。...你可以退出之后看一下带标识的登录页。 ? 注意: 你可能注意到退出之后标签页并没有消失。我正在查找 没有正常工作 的原因。 发布到移动设备 使用 Ionic 浏览器中开发移动应用是非常酷的事情。...如果你登录页输入凭证,可能什么也不会发生。打开 Safari 转到 Develop > Simulator > MyApp / Login,你会看到控制台有一条错误信息。...我相信使用 Cordova 打包 app 之后不会正常工作,因为通过内嵌的 iframe 向服务端发送请求,然后使用 postMessage 将结果返回当前窗口。...= 0; i < responseParameters.length; i++) { parsedResponse[responseParameters[i].split('

    23.2K50

    使用Identity Server 4建立Authorization Server (6) - js(angular5) 客户端

    配置好整个项目之后你可以把 name 去掉试试, 如果去掉的话, web api的controller里面就无法取得到user的name了, 因为js收到的access token里面没有name这个...@angular/cli 然后项目根目录执行: npm install 虽然npm有点慢, 但是也不要使用cnpm, 有bug. js客户端参考 你可以参考官方文档: http://docs.identityserver.io...5 的interceptor不会修改request, 所以只能clone....所以我几乎最外层添加了这个authguard, 里面的代码是: import { Injectable } from '@angular/core'; import { CanActivate } from...自动刷新Token: oidc-client的自动刷新token是只要配置好了, 你就不用再做什么操作了. 刷新的时候, 它好像是会在页面上弄一个iframe, 然后iframe里面操作.

    5.6K50
    领券