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

在Angular 7中,如何根据是创建还是更新来更改表单提交按钮文本?

在Angular 7中,可以通过使用条件语句来根据是创建还是更新来更改表单提交按钮的文本。具体步骤如下:

  1. 在组件的HTML模板中,使用Angular的条件语句(*ngIf)来判断是创建还是更新状态。例如:
代码语言:txt
复制
<button *ngIf="isCreating; else updateButton">创建</button>
<ng-template #updateButton>
  <button>更新</button>
</ng-template>

上述代码中,使用了一个布尔变量isCreating来表示当前是创建状态还是更新状态。如果isCreatingtrue,则显示"创建"按钮;否则,显示"更新"按钮。

  1. 在组件的TypeScript代码中,根据业务逻辑来设置isCreating变量的值。例如:
代码语言:txt
复制
export class YourComponent {
  isCreating: boolean = true; // 默认为创建状态

  // 根据实际情况更新isCreating的值
  updateForm() {
    // 更新表单的逻辑
    this.isCreating = false; // 设置为更新状态
  }
}

上述代码中,updateForm()方法表示表单的更新逻辑。在更新完成后,将isCreating变量设置为false,表示切换为更新状态。

通过以上步骤,根据是创建还是更新状态,可以动态地更改表单提交按钮的文本。

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

相关·内容

AngularDart4.0 指南- 表单

请注意提交按钮被禁用,并且输入控件从绿色变为红色。 您将以小步骤构建此表单创建英雄模型类。 创建控制表单的组件。 用初始表单布局创建一个模板。...使用ngSubmit处理表单提交。 禁用窗体的提交按钮,直到窗体有效。 建立 按照设置说明创建一个名为表单的新项目。...靠近表单顶部的诊断确认所有的更改都反映在model中。 从模板中删除诊断绑定,因为它已经达到了目的。 根据控制状态给出视觉反馈 使用CSS和类绑定,您可以更改表单控件的外观以反映其状态。...点击清除按钮文本字段变为空白,如果您更改了power,它将恢复为默认值。 用ngSubmit提交表单 用户应该能够填写表单提交这个表单。...表单底部的Submit按钮本身不做任何事情,但是由于它的类型(type =“submit”),它会触发一个表单提交表单提交目前无用的。

17.4K30

如何使用AngularJS和PHP为任何位置生成短而独特的数字地址

这将创建一个Generate按钮,允许用户提交表单: . . ....常见事件的例子有: 单击HTML按钮 更改输入字段的内容 将焦点从一个页面元素更改为另一个页面元素 一个事件监听器一个指令,它讲述了一个程序特定事件发生采取某种行动。...让我们继续进行这些更改,并仔细研究这些地图代码如何生成的。...每当用户单击Generate按钮时,index.php文件中的代码都会提交表单并调用该processForm函数,该函数以下createDigitalAddressApp.js位置定义: . . ....然而,关闭之前,让我们快速浏览一下这些文件如何协同工作。 当用户提交表单时,它会触发一个submit事件,并且事件监听器会调用该fetchadd函数: . . .

13.1K20

一篇文学会商用可编辑问卷表单制作【iVX 十二】

现在我们登录框中创建一个类似的注册框: 此时页面的显示效果如下: 1.2 控制登录页注册及登录框显示 接下来我们创建一个布尔变量,用于判断点击的注册按钮还是登录按钮,如果点击注册按钮则显示注册框的页面元素内容...表单内容通过一个编辑页动态生成,页面效果如下: 该页面可以使用左侧的添加表单选项,为需要填写的表单添加动态的选项内容,并且添加后的表单内容可以更改每一行的标题、或者背景色;添加的下拉菜单页可以为其增加选项内容...在此之前需要创建一个变量用于记录点击的序号: 接着表单内容事件中设置事件点击触发,动作之中选择属性更改选中序号变量赋值,值的内容为当前序号: 随后我们设置属性栏中的序号文本数据绑定为选中序号变量...首先我们属性栏下添加一个 if 判断, if 判断下添加一个行名为下拉菜单,在其内部添加一个文本作为提示、一个输入框作为选项填入、一个按钮作为输入框输入内容的提交: 页面中呈现效果如下: 接着我们在当前界面下创建一个数值文本...与提交用户一致的情况下更改删除字段为 1: 最后返回是否成功即可: 5.4 结束表单页的功能编写 我们再创建一个已结束表单页,该页可以下载表单统计数据: 该页面与自己的表单页的区别在于功能按钮的不同

6.7K30

【Java 进阶篇】JavaScript DOM 编程:理解文档对象模型

本篇博客将详细介绍 DOM,包括什么 DOM、如何访问 DOM 元素、如何操作 DOM、DOM 事件等。无论你刚刚入门 web 开发还是希望深入了解 DOM,这篇博客都将对你有所帮助。...属性(Attribute)元素的特性,如 id、class。 文本(Text)元素中的文本内容。 如何访问 DOM 元素? 要访问 DOM 元素,你需要使用 JavaScript。...4. submit 事件 submit 事件表单提交时触发。你可以使用这个事件来验证用户输入或执行其他操作,然后阻止表单提交或继续提交。...,如果验证失败,则阻止表单提交。...通过获取元素、改变文本内容、操作样式、添加事件监听器和处理事件,你可以创建交互性丰富的网页。深入学习 web 开发时,掌握 DOM 操作必不可少的一部分。

18420

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

】 大家好,我IT修真院北京分院第23期学员。今天小课堂的主要内容,input表单的应用,还有html5中新增的属性。...表单元素允许用户表单中(比如:文本域,下拉列表,单选框,复选框等等)输入信息的元素,最主要的作用就是收集信息。...表单元素页面中不可缺少的元素,最新的H5中,表单元素也新增了一些属性,页面构建中发挥了重要的作用。一般来说,表单包含如下几个部分: 1. 提示信息:表单中包含的说明性文字 2....6. submit:提交按钮,每出现一次,一个 Submit 对象就会被创建。 7. reset:重置按钮,会重置当前表单中全部的内容。 8. image:图像形式的提交按钮,写法“”。...7. autocomplete:浏览器是否根据之前提交的输入情况对此input自动填值(即以option形式匹配之前的输入值),取值on或off,默认on。

3.4K30

【Java 进阶篇】创建 HTML 注册页面

创建一个注册页面网页开发的常见任务之一,它允许用户提供个人信息并注册成为网站的会员。我们将从头开始创建一个包含基本表单元素的注册页面,并介绍如何处理用户提交的数据。...其他元素:根据需求,还可以包括其他元素,如下拉列表、单选按钮文本区域等。 下面一个简单的注册页面的HTML结构示例: <!...如果用户提交包含错误的数据,应该向用户显示错误消息,并允许其纠正错误。 实际应用中,你可以服务器端脚本中根据处理结果来决定是显示成功页面还是错误消息。...总结 通过本博客,我们学习了如何创建一个简单的HTML注册页面,包括表单元素、标签、输入字段和提交按钮。我们还了解了一些用于验证用户提交数据的常见技巧和最佳实践。...最后,我们强调了表单处理后的成功页面和错误处理的重要性,以提供良好的用户体验。 创建注册页面HTML表单的基础,这个例子可以扩展到复杂的表单和应用中,以满足不同的需求。

31720

Angularjs基础(十二)

ng-model-options       描述:规定如何更新模型             实例: 失去焦点时绑定输入框的值scope 变量中。                 ...        定义和用法: ng-paste 指令用于告诉AngularJS 文本HTML 元素上粘贴时需要执行的操作。               ...实例:表单提交后执行函数:                            <form ng-submit...}               })                    定义和用法: ng-submit 指令用于表单提交后执行指定函数。         ...语法:         参数值: 值: expression 描述: 表单提交后函数被调用,或者一个表达式将被执行,表达式返回函数调用

3K100

Angular、React 和 Vue 三大框架,Web 开发该如何选择?

React 的 Mental Model 看起来很可靠,其组件让创建用户界面变得容易,API 灵活且富有表现力,整个项目给人的感觉就应该那样。...这样,创建具有增强功能的应用程序就简单轻松了。...Vue.js VS React:双向数据绑定 Vue 中,你可以轻松地将组件变量绑定到表单字段。当你更改变量时,表单字段会更新,当用户更改表单字段时,组件变量也会更新。...Vue 的第一个和第二个版本都是由一个人创建的,因此,某些方面,它可能比竞争对手更糟糕,尤其安全方面。...Vue 3 由一个开发团队创建的,这意味着现在许多 Bug 和缺点都得到了修复,框架本身的效率也得到了提升。 我应该学习 React 还是 Angular

1.7K30

Blazor 中的路由和路由模板

无论 HTML 视图、JSON 有效负载、二进制流还是其他输出,路由器都会将请求的 URL 作为要执行的指令,让客户端响应作为其输出。URL 还可以包括可选参数,以帮助路由器确定要呈现的特定内容。...客户端上,路由器参与多种情况,最常见的情况用户单击链接、表单上的提交按钮或下拉列表中触发服务器调用的项。路由器绑定到内部位置更改事件,并从客户端处理导航到新请求路径的整个过程。...毋庸置疑,当应用程序的位置以编程方式更改时,路由器也会启动。最后一点也非常重要,路由器浏览器历史记录中记录任何它负责的位置更改,因此后退和前进按钮可以按用户的期望工作。...例如,它不具备检查路由上的授权和创建在位置更改时执行视图转换的链接的功能。与 Angular 路由器不同,它在获取路由参数后无法异步运行解析步骤。...智能的链接和编程 URL 导航 Blazor 应用程序中,欢迎你使用定位标记来创建指向外部内容的链接。

8.3K21

IntelliJ IDEA 2022.2.2汉化版免登陆账号「winmac」

直接从触摸栏运行,构建和调试项目,提交更改并更新项目。IntelliJ IDEA按钮显示Touch Bar界面中间的应用程序特定区域中,它们取决于上下文或您按下的修改键。...- Linux上更新了IntelliJ主题我们让Linux上的IntelliJ主题看起来现代化。UI元素(如按钮,单选按钮,复选框,文本字段,选择控件,微调器和选项卡)的外观已更新。...- VCS日志选项卡中的增强功能您现在可以从“ 日志”选项卡的上下文菜单中删除提交中的Git标记。此外,Diff预览面板现在可在VCS日志中使用。此外,您可以根据需要打开任意数量的日志选项卡。...7、差异查看器比较任何文本来源IntelliJ IDEA 中,您可以打开一个空的差异查看器,并在其左侧和右侧面板中粘贴您要比较的任何文本。...8、JavaScript和TypeScript- 提取并转换React组件使用新的Extract Component重构来创建新的React组件,方法从现有的渲染方法中提取JSX代码。

4.7K30

Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)

Angular简介:   Angular 一个应用设计框架与开发平台,用于创建高效、复杂、精致的单页面应用。...学习资料推荐: Angular-GitHub仓库地址: https://github.com/angular/angular Angualr官方文档教程(推荐):   对于我们而言无论学习什么技术...,首先一点不要忽视了官网的重要性,而且Angular官网还有中文版的相对而言容易上手。...创建你的第一个Angular项目: https://www.cnblogs.com/Can-daydayup/p/14166192.html Angular 学习资源清单: https://github.com...规定当在元素上松开鼠标按钮时的行为 ng-non-bindable 规定元素或子元素不能绑定数据 ng-open 指定元素的 open 属性 ng-options 列表中指定 <

5.3K41

【Java 进阶篇】深入了解HTML表单标签

HTML(Hypertext Markup Language)表单标签网页开发中的重要组成部分,用于创建各种交互式元素,允许用户输入、提交和处理数据。...本文将深入探讨HTML表单标签,包括如何创建表单、各种输入元素、表单属性以及一些最佳实践。无论你初学者还是有经验的开发人员,都能从本文中学到有关HTML表单的关键知识。 什么HTML表单?...HTML表单由多个HTML元素组成,包括文本框、密码框、单选按钮、复选框、下拉列表等。 创建HTML表单创建HTML表单,你需要使用标签。...接下来,让我们一步步介绍如何添加不同类型的表单元素。 文本框和密码框 文本框和密码框用于接受用户的文本输入。使用标签创建它们,其中type属性指定了输入框的类型。...提交按钮 提交按钮允许用户将表单数据提交给服务器进行处理。使用标签的type="submit"属性创建提交按钮。 示例: <!

19410

HTML、CSS 和 JavaScript 基本前端语言学习指南

JavaScript 可以说是三者中最复杂的,用于使网站更具交互性,并支持开发复杂的网站——弹出框、更改颜色的按钮以及您喜欢的网站的所有其他动态方面都可能启用通过 JavaScript。...为了解决这个问题,CSS 被发明为一组可以为 HTML 元素分配属性的规则,现有标记语言的基础上创建一个复杂的网页。...HTML 将允许您指定宣布比赛的文本表单中提出问题的文本(例如参与者的姓名、年龄、地址等)之间的区别。CSS 将允许您修饰所有这些文本,赋予其格式、颜色和样式,同时帮助您构建用户输入答案的框。...当所有内容都已填写并提交时。它甚至可以插入用户表单提交的名字,以获得更加个性化的信息。...例如,HTML中,您可以创建与您在互联网上经常看到的按钮类似的按钮

5.2K30

三分钟让你了解什么Web开发?

最初,这些信息都是作为文本存储的——这就是为什么现在文本、媒体和文件都通过该协议进行交换的情况下,名称超文本传输协议仍然存在。 2、如何保存、检索和保存信息?...HTML一种用于创建web页面的标准标记语言。换句话说,它是一个带有标记的简单文本文件,帮助浏览器找到如何显示信息的方法。...简单地说,这就是数据如何被推送到服务器,然后最终存储一个文件或数据库中。 注意:假设我们想在提交之前添加验证——例如,产品应该包含至少5个字符,或者SKU字段不应该是空的。...在用户输入信息并单击submit按钮后,“创建Post”,这些表单值将通过Post发送到web服务器。可以使用任何服务器端脚本语言读取POST值。...POST:向服务器提交表单数据,或者通过Ajax提交任何数据。 例如,当你浏览器中输入google.com时,浏览器会将这个命令发送到google.com服务器。

5.7K30

HTML 表单和约束验证的完整指南

本文中,我们将研究 HTML 表单字段和 HTML5 提供的验证选项。我们还将研究如何通过使用 CSS 和 JavaScript 来增强这些功能。 什么约束验证? 每个表单域都有一个目的。...但请避免使用它,因为它很少有用) search 搜索输入字段 submit 一个表单提交按钮 tel 电话号码输入字段 text 文本输入字段 time 没有时区的时间选择器 url URL 输入字段...您可以通过以下方式停止浏览器验证: novalidate给元素添加一个属性 向formnovalidate提交按钮或图像添加属性 创建自定义 JavaScript 输入 如果您正在编写一个新的基于...:indeterminate 不确定的复选框或单选状态,例如取消选中所有单选按钮时 :default 默认提交按钮或图像 您可以placeholder使用::placeholder伪元素设置输入文本的样式...第一次提交后或更改值时显示验证错误将提供更好的体验。

8.2K40

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

Angular中使用表单元素非常方便。正如我们在前面几个例子中看到的,你可以使用ng-model属性把元素绑定到你的模型属性上。...这一机制对于所有标准的表单元素都可以起作用,例如文本框、单选按钮、复选框,等等。...如果你正在使用表单把输入项组织起来,你可以form自身上使用ng-submit指令来指定一个函数,当表单提交的时候可以执行这个函数。...我们来扩展前面的例子,实现用户点击一个按钮就可以为他所选的商品计算金额: 同时,提交表单的时候,ng-submit还会自动阻止浏览器执行默认的POST操作。...对于处理其他事件的情况,例如提供非表单提交型的交互,Angular提供了一些事件处理指令,它们类似于浏览器原生的事件属性。

2K60

readonly 和 disable的区别

一般比较常用的情况某个表单中为用户预填了某个唯一识别代码,不允许用户改动,但是提交时需要传递该值,此时应该将它的属性设置为readonly 。...经常遇到当用户正式提交表单后需要等待管理员的信息验证,这就不允许用户再更改表单中的数据,而是只能够查看,由于disabled的作用元素范围大,所以此时应该使用disabled,但同时应该注意的要将submit...如果说在这种情况下用readonly来代替disabled的话,若表单中只有input(text / password)和textarea元素,那还是可以的,如果存在其他发元素,比如select,用户可以重新改写值后按回车键进行提交...(回车默认的submit触发按键) 我们常常在用户按了提交按钮后,利用javascript将提交按钮disabled掉,这样可以防止网络条件比较差的环境下,用户反复点提交按钮导致数据冗余地存入数据库...而readonly只是针对文本输入框这类可以输入文本的输入项,如果设为true,用户只是不能编辑对应的文本,但是仍然可以聚焦焦点,并且提交表单的时候,该输入项会作为form的一项提交

1.4K40

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

您还可以更改轮播指示符的样式、轮播控制按钮的图标等,以满足您的项目需求。 Bootstrap 模态框(Modal) 模态框一个常见的插件,用于在网页上显示对话框、提示框或表单。...用户可以点击关闭按钮或模态框外部来关闭模态框。 自定义模态框 模态框可以根据不同的设计需求进行自定义。您可以更改模态框的样式、内容、操作按钮等。以下一个示例,展示如何自定义模态框: <!...自定义标签页 标签页可以根据不同的设计需求进行自定义。您可以更改选项卡的样式、内容、默认活动选项卡等。以下一个示例,展示如何自定义标签页: <!...您还可以更改选项卡的样式、内容和切换效果,以满足您的项目需求。 Bootstrap 表单验证 表单验证一个重要的前端功能,用于确保用户提交表单时提供有效的数据。...这个基本的表单验证结构包含了文本输入字段和必填字段。如果用户尝试提交空值,浏览器将显示验证错误消息。 自定义表单验证 表单验证可以根据不同的需求进行自定义。

20530
领券