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

Angular2和Bootstrap:如何在表单提交上激活(提交)事件以及关闭模式?

在Angular2中,可以使用表单的ngSubmit指令来激活表单提交事件。要关闭模态框,可以使用Bootstrap的模态框组件和相应的方法。

首先,在Angular2中,你需要在表单元素上添加ngSubmit指令,并将其绑定到一个在组件中定义的方法。例如:

代码语言:html
复制
<form (ngSubmit)="onSubmit()">
  <!-- 表单内容 -->
  <button type="submit">提交</button>
</form>

在组件类中,你需要定义一个名为onSubmit的方法,用于处理表单提交事件。例如:

代码语言:typescript
复制
onSubmit() {
  // 处理表单提交逻辑
}

当用户点击提交按钮时,Angular2会自动调用onSubmit方法。

接下来,要关闭模态框,你可以使用Bootstrap的模态框组件和相应的方法。首先,在模态框的HTML代码中,你需要添加一个关闭按钮,并为其添加data-dismiss属性。例如:

代码语言:html
复制
<div class="modal">
  <!-- 模态框内容 -->
  <button type="button" class="close" data-dismiss="modal">&times;</button>
</div>

然后,在组件类中,你可以使用JavaScript或TypeScript来获取关闭按钮的DOM元素,并为其添加点击事件监听器。在事件处理函数中,你可以使用Bootstrap的模态框方法来关闭模态框。例如:

代码语言:typescript
复制
import { ElementRef, ViewChild } from '@angular/core';

@Component({
  // 组件配置
})
export class YourComponent {
  @ViewChild('closeButton') closeButton: ElementRef;

  closeModel() {
    this.closeButton.nativeElement.click(); // 触发关闭按钮的点击事件
  }
}

在模态框的HTML代码中,你需要给关闭按钮添加一个模板引用变量。例如:

代码语言:html
复制
<div class="modal">
  <!-- 模态框内容 -->
  <button #closeButton type="button" class="close" data-dismiss="modal">&times;</button>
</div>

最后,你可以在表单提交事件的处理函数中调用closeModel方法来关闭模态框。例如:

代码语言:typescript
复制
onSubmit() {
  // 处理表单提交逻辑
  this.closeModel(); // 关闭模态框
}

这样,当用户点击提交按钮时,表单提交事件会被激活,并且模态框会被关闭。

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

相关·内容

Angular2 :从 beta 到 release4.0 版本升级总结

// 表单相关的 'angular2/commom' => '@angular/forms' 三、新增NgModule 官方说明 Angular 模块能帮你把应用组织成多个内聚的功能块。...ActivatedRoute:获取路由信息 路由事件实例,NavigationEnd表示导航事件变更完毕,等 反正改了挺多的,请自行查询官方API文档…[捂脸] 新增路由模块 路由使用NgModule...五、表单相关 依赖API更改 // 依赖中某些API更改 // ControlGroup => FormGroup import {ControlGroup} from 'angular2/commom...但此处因为有些动态计算环境的代码,故编译失败,此处手动关闭。 5....升级angular(v2.4.0)到(v4.1.1)版本后,左侧导航的状态定位失效 原因:升级后,routercomponent的hook顺序调整(仅根据个人观察,未经验证),导致组件状态未能在路由事件结束

8.2K00

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

什么是事件发射器?它是如何在Angular 2中工作的? Angular 2不具有双向digest cycle,这是与Angular 1不同的。...如何在Angular 2应用程序中使用codelyzer? 所有企业应用程序都会遵循一组编码惯例准则,以更好的方式维护代码。...优化取决于应用程序的类型大小以及许多其他因素。但一般来说,在优化Angular 2应用程序时,我会考虑以下几点: 考虑AOT编译。...Shadow DOM以及其它一些技术,使开发人员能够像标签一样构建自己的一级标签,Web组件API。总的来说,这些新的标签API被称为Web组件。...缺点: 仅适用于HTMLCSS,其它文件类型需要前面的构建步骤 没有watch模式,必须手动完成(bin / ngc-watch.js)并编译所有文件 需要维护AOT版本的bootstrap文件(使用

17.3K80
  • 教你使用HTML5原生对话框元素,轻松创建模态框组件

    以前,如果我们想要构建任何形式的模式对话框或对话框,我们需要有一个背景,一个关闭按钮,将事件绑定在对话框中的方式安排我们的标记,找到一种将消息传递出去的方式对话......这真的很复杂。...一、Bootstrap模态框原生模态框的对比 下面是一个bootstrap模态框的html结构: dialog元素的.show().close()两个api分别是显示关闭对话框,通过在DOM元素上使用这两个api,您可以显示关闭对话框。 例如: <!...关闭对话框后,close会触发一个事件。另外,用户可以通过输入“Escape”键来关闭模式对话框。这将激发cancel您可以取消使用的事件event.preventDefault()。  ...表单提交后,它会关闭对话框并设置dialog.returnValue到value已使用的提交按钮。 此外,您可以使用该autofocus属性在弹出对话框时自动将焦点对准对话框内的窗体控件。

    4.9K10

    Angular 2 + 折腾记 :(2)初步认识angular2,不一样的开发模式

    ---- 基础概念 国内的官网--基础 词汇表(又名计算机术语--angular2 & es6 & es7) 速查表:又名demo写法表,里面涵盖了很多写法,相当于一本小字典 关于ng2的一堆为什么:... 复制代码 main.ts // 引入生产模式,控制关闭开发模式的,函数来的 import { enableProdMode } from '@angular...BrowserModule, FormsModule, HttpModule ], providers: [], // 服务 bootstrap...单向,数据流向视图],指令,原生html控件的自身属性[value,src,class,style]等,双引号内支持条件表达式[不完全等同于js条件表达式]或者方法亦或者变量, (click)="": 事件绑定...---- 总结 这一篇没有涉及到路由这些表单这些; 准备拆成两个文章来说; 路由的配置及懒加载这些, 模板驱动的表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。

    6.2K20

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

    接下来一起了解Angular2这个版本发布的原因以及如何将其添加到Web开发中。 ...依赖注入在模块化开发元素隔离方面非常有帮助,但它的实现一直受到Angular 1.x的困扰。Angular2解决了这个问题,另外还添加了一些缺少的功能,子注入以及生命周期/范围控制。...子注入: 子注入继承了其父级注入所有的专业服务,以及在子层次重写的能力。根据需要,在一定范围内,一些类型的对象可以被调用机械的重写。...该模板的实例化以及插入到DOM过程可以完全由指令创建者控制。例如ng-repeatng-if。...激活:它会响应导航到新控件的成功事件。 canDeactivate:它将防止或允许跳出旧控制器的导航。 停用:它会响应跳出旧控制器的成功事件

    8.7K20

    实战 | Change Detection And Batch Update

    我们别急着下结论,我们知道应用程序状态的改变主要是下面三种情况引起的: Events - 点击按钮 Timers - setTimeout XHR - 从服务器获取数据 我们才测试了事件这一种情景,...如果我们不使用Angular1提供的事件系统、定时器$http,如在jQuery事件中进行数据更新时,我们需要手动调用$apply。...Angular2 当数据变化时,Angular2从根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据的比较来决定是否更新UI,这点Angular1的脏值检测有点像,但是Angular2...config.async 我们可以通过将Vue.config.async设置为false,关闭异步更新机制,让它变成同步更新,看下面的例子: 打开控制台你会发现打印了1 2,但是最好别这么干 如果关闭了异步模式...async: false不推荐用在生产环境中 — vuejs.org 总结 自此我们分析了React、Angular1/2Vue的变化检测以及批量更新的策略。

    3.2K20

    43. Vue组件案例-评论列表

    编写这个案例步骤大致如下: 编写一个基本的样式页面,页面内容有两部分:提交评论信息表单、展示评论信息的列表 那么提交评论信息表单可以写为一个子组件,而评论信息列表为父组件 给提交评论信息表单将子组件的评论内容传递到父组件评论信息列表...同时,需要写一个存储以及刷新评论信息列表的方法,在子组件提交评论信息之后,子组件还要调用父组件的这个刷新方法。...但是为了演示父组件与子组件之间的传值以及调用关系,我将上面提交评论的部分抽出来作为一个子组件。 2.抽取评论内容作为子组件 ?...4.使用v-mode设置评论者以及评论内容 ? 5.设置提交按钮的click事件,打印评论数据 ? 在浏览器查看一下打印出来的数据,如下: ? 已经可以获取到数据了,下面将其进行存储。...下面来看看如何在列表中刷新数据。 8.在父组件编写刷新列表的方法reload_list(),提供子组件进行调用 ? ?

    2.1K30

    FE(0x01)--前端吗?我需要一个按钮

    Bootstrap的核心就是网格布局,你可以写一套代码兼容PC移动端,其他的倒不是很占优势。...3.1、传统表单类按钮 在没有Ajax之前,我们跟后台交互是不是只能通过form,form决定了你的提交地址,提交方式。然后button去反应你的积极性。...提交 3.2、非传统表单类按钮 在有了Ajax之后,似乎很少看到用传统表单提交的身影,更多地是通过ajax来做这件事。...而这里就会产生一个问题,在一个传统表单中,你点击了一个提交按钮,传统表单提交Ajax提交哪个先呢?...通过实践我们知道传统的表单提交会优先于AJax的提交,所以在这里我们需要做一件事,就是禁止传统表单提交,这里分享一个简单粗暴的做法.

    83830

    41. Vue组件案例-评论列表

    编写这个案例步骤大致如下: 编写一个基本的样式页面,页面内容有两部分:提交评论信息表单、展示评论信息的列表 那么「提交评论信息表单」可以写为一个子组件,而「评论信息列表」为父组件 给「提交评论信息表单」...将子组件的评论内容传递到父组件「评论信息列表」 同时,需要写一个存储以及刷新评论信息列表的方法,在子组件提交评论信息之后,子组件还要调用父组件的这个刷新方法。...但是为了演示父组件与子组件之间的传值以及调用关系,我将上面提交评论的部分抽出来作为一个子组件。...4.使用v-mode设置评论者以及评论内容 5.设置提交按钮的click事件,打印评论数据 在浏览器查看一下打印出来的数据,如下: 已经可以获取到数据了,下面将其进行存储。...下面来看看如何在列表中刷新数据。

    1.9K10

    【Java 进阶篇】深入了解 Bootstrap 组件

    class="component-class":这是 Bootstrap 组件的样式类,它定义了组件的外观行为。 在下面的部分,我们将探讨一些常见的 Bootstrap 组件以及它们的用法。...激活状态按钮 Bootstrap 还提供了按钮的激活状态,当按钮被点击后,可以显示为被激活状态。...可关闭的警告框 有时候,您可能希望用户能够关闭警告框。Bootstrap 允许您创建可关闭的警告框,用户可以点击关闭图标来关闭警告。...以下是一个示例,展示如何在模态框中添加表单: ...您可以根据需要自定义表单字段布局。 多个模态框 您可以在同一页面上创建多个不同的模态框,只需为它们分配不同的 id 目标值即可。这允许您在一个网页中使用多个独立的弹出窗口。

    20520

    基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理优化

    1、Bootstrap对话框的使用 常规的Bootstrap有几种尺寸的对话框,包括默认状态的小对话框,中等宽度的对话框,全尺寸的对话框几种,Bootstrap的对话框界面非常友好, 当我们使用ESC...,可以执行类似保存数据的提交操作的,因此需要对表单的数据进行验证,如果有错误,我们可能需要在界面上提醒,因此在页面初始化的时候,需要初始化表单的验证规则,下面是我们常规的表单初始化操作。...//绑定相关事件 function BindEvent() { //判断表单的信息是否通过验证 $("#ffAdd").validate(...Bootbox.js是一个小的JavaScript库,它帮助您在使用bootstrap框架的时候快速的创建一个对话框,也可以帮您创建,管理或删除任何所需的DOM元素或js事件处理程序。...我们在提交表单后,通过Ajax响应后台返回结果,并在前台显示返回信息,jNotify能非常优雅的显示操作结果信息。

    5.2K50

    Netty 源码解析 ——— 服务端启动流程 (上)

    SingleThreadEventExecutor通过持有一个MpscQueue taskQueue成员变量,来维护提交上来的任务。...⑤ NioEventLoop的事件循环主要完成了:a)已经注册到Selector的Channel的监控,并在感兴趣的事件可执行时对其进行处理;b)完成任务队列(taskQueue)中的任务,以及对可执行的定时任务周期性任务的处理...比如,当EventLoop执行关闭操作后,还有任务提交上来,则需要拒绝该任务,这时候就会REJECT的rejected方法,抛出一个RejectedExecutionException异常。...设置EventLoopGroup的parentGroupchildGroup。这些EventLoopGroup是用于处理ServerChannelChannel的所有的事件以及I/O操作。...建议大家可以看看 Netty in action ——— 异步事件驱动、Netty in action ——— Bootstrapping、Netty in action ——— 事件循环 线程模式

    89660

    Change Detection And Batch Update

    我们别急着下结论,我们知道应用程序状态的改变主要是下面三种情况引起的: Events - 点击按钮 Timers - setTimeout XHR - 从服务器获取数据 我们才测试了事件这一种情景,...如果我们不使用Angular1提供的事件系统、定时器$http,如在jQuery事件中进行数据更新时,我们需要手动调用$apply。 Angular2 ?...当数据变化时,Angular2从根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据的比较来决定是否更新UI,这点Angular1的脏值检测有点像,但是Angular2的更新没有副作用...$el.textContent); }); 打开控制台你会发现打印了1 2,但是最好别这么干 如果关闭了异步模式,Vue 在检测到数据变化时同步更新 DOM。...async: false不推荐用在生产环境中 — vuejs.org 总结 自此我们分析了React、Angular1/2Vue的变化检测以及批量更新的策略。

    3.7K70

    Change Detection And Batch Update

    我们别急着下结论,我们知道应用程序状态的改变主要是下面三种情况引起的: Events - 点击按钮 Timers - setTimeout XHR - 从服务器获取数据 我们才测试了事件这一种情景,...如果我们不使用Angular1提供的事件系统、定时器$http,如在jQuery事件中进行数据更新时,我们需要手动调用$apply。 Angular2 ?...当数据变化时,Angular2从根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据的比较来决定是否更新UI,这点Angular1的脏值检测有点像,但是Angular2的更新没有副作用...$el.textContent); }); 打开控制台你会发现打印了1 2,但是最好别这么干 如果关闭了异步模式,Vue 在检测到数据变化时同步更新 DOM。...async: false不推荐用在生产环境中 — vuejs.org 总结 自此我们分析了React、Angular1/2Vue的变化检测以及批量更新的策略。

    3.3K40

    ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件

    模态框(modal.js) 模态框以弹出框的形式可以为用户提供信息亦或者在此之中完成表单提交功能。Bootstrap的模态框本质上有3部分组成:模态框的头、体一组放置于底部的按钮。...Id,通过添加active来激活哪一个Tab内容的显示。...data-parent="#accordion" href="#questionTwo">                             问题 2:MVP 奖励存在的意义何在...在上述容器里添加一个有序列表,它将渲染成小圆点代表当前激活的幻灯片(显示在右下角)。...小结 在这篇博客中介绍了常见的Bootstrap插件,通过使用数据属性编程方式的API来使用这些插件,更多插件访问:http://v3.bootcss.com/javascript/ 获取。

    5.2K60

    表单开发』一次即通关的5个技巧

    那作为一名前端开发,如何辅助产品尽可能让表单需求一次即通关,减少反复沟通以及缺陷修缺陷的时间,从而加快项目进度?...表单提交或出错时的Loading提示 业务场景:表单提交后没展示Loading导致问题:当请求request较久时,页面像是卡死了,没任何响应,用户体验很差。...表单重新打开时,要重置表单数据 业务场景:如果表单是属于弹窗 Dialog 内,部分开发为了代码可复用性,新增编辑是共用同一个表单代码。...不小心点击关闭页面时,要提示让用户确认 业务场景:当用户在填写一个长表单时,手误点了关闭页面或者点击去到其他页面。 导致问题:用户花时间填写的表单数据会丢失,用户又要重新填一遍。用户体验大大降低。...value) {                // 当弹窗关闭不涉及表单时,清除事件                window.onbeforeunload = null;

    64420

    【MySQL】MariaDB Galera Cluster(mariadb10.1.22)部署

    ● 同时具有读写的扩展能力。 ● 更小的客户端延迟。 ● 节点间数据是同步的,而Master/Slave模式是异步的,不同slave上的binlog可能是不同的。...● 允许最大的事务大小由wsrep_max_ws_rowswsrep_max_ws_size定义,任何大型操作将被拒绝,大型的LOAD DATA操作。...如果有两个事务向在集群中不同的节点向同一行写入并提交,失败的节点将中止。...● XA事务不支持,由于在提交上可能回滚。 ● 整个集群的写入吞吐量是由最弱的节点限制,如果有一个节点变得缓慢,那么整个集群将是缓慢的。为了稳定的高性能要求,所有的节点应使用统一的硬件。...To force cluster bootstrap with this node, edit the grastate.dat file manually and set safe_to_bootstrap

    1.9K40

    【依葫芦画瓢】SSM-CRUD-3

    com.fasterxml.jackson.core jackson-databind 2.8.8 c、设置返回信息类(Msg),对返回信息统一处理 // 100表示成功,200表示失败 privateintcode; // 提示消息,成功或失败提示...d、填写新增人员信息,进行前后端校验,检验环节会在下文中详细说明 e、点击“保存”按钮,ajax发起请求,将表单数据序列化(serialize())后提交 f、保存失败,输出错误提示;保存成功,关闭模态框...三、表单校验 用户名邮箱格式校验 + 用户名重复性校验 + 后端JSR303校验 a、用户名邮箱格式校验。...在输入用户名后触发change事件,发送ajax请求,服务器端返回结果,在用户名不可用的情况下,设置“保存”按钮不可用。...c、后端JSR303校验,为了防止“小人”绕过前端校验,在重要数据的提交上需要增加后端代码校验。

    1.2K50

    AngularDart4.0 指南- 表单

    开发表单需要设计技巧(超出本页面的范围),以及双向数据绑定,更改跟踪,验证错误处理的框架支持,您将在本页面上了解这些信息。 本页面向您展示了如何从头构建一个简单的表单。...用户输入显示如何使用事件绑定监听DOM事件以及如何使用显示的值更新组件属性。 现在您需要同时显示,聆听提取。...对你来说,这很简单: 在(增强的)表单元素上定义一个模板引用变量。 在多处的按钮中引用该变量。 显示Model(可选) 提交表单目前没有视觉效果。 预期的演示。...提交的标志变为真,表格消失。 您将看到表格中显示的英雄模型值(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交的标志。 当您单击编辑按钮时,该表消失,并且可编辑的表单重新出现。...表单提交,通过ngSubmit事件绑定处理。 模板引用变量,heroFormname。 双向数据绑定([(ngModel)])。 用于验证表单元素更改跟踪的NgControl 指令。

    17.5K30
    领券