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

Angular 8,Typescript --在单击按钮以显示那些无效/必填字段后,如何获取表单中所有无效元素的列表

Angular 8是一个流行的前端开发框架,而Typescript是一种用于编写Angular应用程序的编程语言。在单击按钮以显示那些无效/必填字段后,可以通过以下步骤获取表单中所有无效元素的列表:

  1. 在组件中引入必要的模块和类:
代码语言:txt
复制
import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
  1. 在组件类中使用ViewChild装饰器获取表单的引用:
代码语言:txt
复制
@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('myForm') myForm: NgForm;
  
  // 其他组件代码...
}
  1. 在HTML模板中,给表单添加一个模板引用变量(这里命名为"myForm"):
代码语言:txt
复制
<form #myForm="ngForm">
  <!-- 表单字段 -->
</form>
  1. 创建一个方法来获取所有无效的表单元素:
代码语言:txt
复制
getInvalidFormElements() {
  const invalidElements = [];
  const formControls = this.myForm.controls;

  for (const controlName in formControls) {
    if (formControls.hasOwnProperty(controlName)) {
      const control = formControls[controlName];
      if (control.invalid) {
        invalidElements.push(controlName);
      }
    }
  }

  return invalidElements;
}

这个方法使用myForm.controls来获取表单中所有的控件,然后遍历每个控件检查其valid属性。如果valid为false,表示该控件无效,将其控件名添加到invalidElements数组中。

  1. 在需要的地方调用getInvalidFormElements()方法,以获取所有无效的表单元素的列表:
代码语言:txt
复制
// 在合适的地方调用方法
const invalidElements = this.getInvalidFormElements();
console.log(invalidElements);

上述代码将打印出所有无效表单元素的列表。

请注意,以上答案是针对Angular 8和Typescript的,如果你使用的是其他版本的Angular或其他编程语言,代码可能会有所不同。

对于腾讯云相关产品和介绍链接,根据提供的问题内容没有明确指定需要涉及的腾讯云产品,无法提供相关推荐。

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

相关·内容

AngularDart4.0 指南- 表单 顶

这个表格中的三个字段中的两个是必需的。 遵循材料设计准则,必填字段带有星号(*)。 如果您删除了英雄名称,表单将以吸引人注意的风格显示验证错误: ?...创建一个基本的表单 一个Angular表单有两个部分:一个基于HTML的模板和一个组件类,以编程方式处理数据和用户交互。 从课程开始,因为它简要地说明了英雄编辑可以做什么。...点击清除按钮。 文本字段变为空白,如果您更改了power,它将恢复为默认值。 用ngSubmit提交表单 用户应该能够在填写表单后提交这个表单。...如果没有Angular的帮助,你需要做什么才能将按钮的启用/禁用状态连接到表单的有效性? 对你来说,这很简单: 在(增强的)表单元素上定义一个模板引用变量。 在多处的按钮中引用该变量。...提交的标志变为真,表格消失。 您将看到表格中显示的英雄模型值(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交的标志。 当您单击编辑按钮时,该表消失,并且可编辑的表单重新出现。

17.5K30

JavaScript(十三)

提交表单时可能出现的最大问题,就是重复提交表单。解决这一问题的办法有两个: 在第一次提交表单后就禁用提交按钮 利用 onsubmit 事件处理程序取消后续的表单提交操作。...重置表单 在用户单击重置按钮时,表单会被重置。使用 type 特性值为 “reset” 的 input 或 button 都可以创建重置按钮,如下: 单击重置按钮重置表单时,会触发 reset 事件,利用这个机会,我们可以在必要时取消重置操作。 表单字段 可以像访问页面中的其他元素一样,使用原生 DOM 方法访问表单元素。...这个 elements 集合是一个有序列表,其中包含着表单中的所有字段,每个表单字段在 elements 集合中的顺序,与它们出现在标记中的顺序相同,可以按照位置和 name 特性来访问它们。...如果所有表单字段都有效,这个方法返回 true,即使有一个字段无效,这个方法也会返回 false。

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

    我们将使用标签的type="submit"属性创建提交按钮。 其他元素:根据需求,还可以包括其他元素,如下拉列表、单选按钮、文本区域等。...required:这个属性用于标记字段为必填字段,如果用户未填写将无法提交表单。 处理表单提交 在实际应用中,当用户填写并提交表单时,通常需要使用服务器端脚本来处理表单数据。.... // 数据处理完毕后,可以重定向用户或显示成功消息 } ?> 在实际应用中,你可能需要更复杂的数据验证和处理逻辑,例如检查用户名是否唯一、密码加密、发送确认电子邮件等等。...总结 通过本博客,我们学习了如何创建一个简单的HTML注册页面,包括表单元素、标签、输入字段和提交按钮。我们还了解了一些用于验证用户提交数据的常见技巧和最佳实践。...最后,我们强调了表单处理后的成功页面和错误处理的重要性,以提供良好的用户体验。 创建注册页面是HTML表单的基础,这个例子可以扩展到更复杂的表单和应用中,以满足不同的需求。

    44520

    文档和元素的几何滚动

    文档坐标和窗口坐标 元素位置以像素来进行度量,向右为x坐标的增加,向下为y坐标的增加。有两个坐标,一个坐标为文档的原点,一个为窗口的原点,这两个原点相互辅助。...目的是避免不完整或者无效的数据通过网络提交到服务端程序。onsubmit事件只能通过单击提交按钮触发。...当用户在一个文本域输入文本或从下拉列表中选择一个选项后就触发change事件,当用户在一个文本域中该数据不是每次用户输入一个键值时都会触发该事件。它仅仅当用户改变了值才会触发该事件。...失去焦点触发blur事件 在事件处理程序代码中关键字this将会触发该事件的文档元素的一个引用,或者通过this.form.x得到该表单中以x命名的元素 事件总结 提交触发的事件 当用户单击按钮(或者回车的时候...开关按钮 复选框和单选元素为开关按钮,或称之为有两种视觉状态的按钮。即选中或未选中。通过对其单击,用户可以改变其开关状态。

    5.2K00

    为啥你的UI界面感觉乱?这7个常见问题一定要避免

    另外,要考虑一下内容区块的极端情况,比如列表的文字最长和最短大概有多少字数。优秀的设计师应该始终主动思考。以考虑客户将来可能需要扩展UI的可能性。 02.区分主要动作和次要动作 ?...例如,一个好的解决方案可能是设计404和500页的插图或动画。 a.表单合法性检查 在设计错误状态时,请尽量避免惹恼用户。特别要注意所有可能的形式检查。 ‍ 例如,假设您有一个包含必填字段的表单。...这意味着开发人员会进行相应的检查,“所有必填字段都不能为空。” 假设用户尝试以随机顺序填写表格。当第一个必填字段失去焦点状态时,它将返回错误:“请填写此字段。这是必需的!” ‍...我们可怜的用户大声说:“等等,我只是在表单字段之间单击,甚至没有单击'提交'!” 而且情况甚至可能变得更糟。例如,假设您有另一个检查,“提交”按钮将被禁用,直到所有必填字段不再为空。 ‍...它们还是现代界面的基本组成部分,尤其是在移动设备上。在应用程序中,图标通常等同于按钮。这就是为什么选择正确的视觉图像以符合元素含义的原因非常重要。

    1.4K40

    Angularjs的表单验证

    提供给我们的属性有: 请注意,这是这个属性的格式: formName.inputFieldName.property 未修改过的表单 表示用户是否修改了表单。...如果表单当前没有通过验证,他将为true: formName.inputFieldName.$invalid 最后两个属性在用于DOM元素的显示或隐藏时是特别有用的。...当一个字段是无效的,.ng-invalid将被应用到这个字段上。...点击提交后显示验证信息 要在用户试图提交表单时显示的验证,你可以通过在scope中设置一个'submitted'值,并检查该值来控制显示错误。 让我们来看看第一个例子,只有在点击提交表单时才显示错误。.../ Submit as normal } else { $scope.signup_form.submitted = true; } } }]); 现在,当用户尝试提交表单并且同时有一个无效的元素时

    2.2K10

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

    在本文中,我们将研究 HTML 表单字段和 HTML5 提供的验证选项。我们还将研究如何通过使用 CSS 和 JavaScript 来增强这些功能。 什么是约束验证? 每个表单域都有一个目的。...:indeterminate 不确定的复选框或单选状态,例如取消选中所有单选按钮时 :default 默认提交按钮或图像 您可以placeholder使用::placeholder伪元素设置输入文本的样式...在第一次提交后或更改值时显示验证错误将提供更好的体验。...同样,无效表单可能会突出显示无效字段。 现场验证 各个字段具有以下约束验证属性: willValidate:true如果元素是约束验证的候选元素,则返回。...当它这样做时,分配给该字段的任何自定义验证功能将依次执行。必须全部返回true才能使该字段有效。 无效字段具有invalid应用于该字段的父元素的类,该类使用 CSS 显示红色帮助消息。

    8.4K40

    杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

    可以在父元素上检测子元素获取焦点的情况。...可以用同样的方法解决 元素上的问题 阻止默认行为 网页中的元素都有自己默认的行为,例如:单击超链接后悔跳转,单击”提交”按钮会表单会提交,有时需要阻止元素的默认行为 在jquery中,提供了preventDefault...举一个例子,在项目中,经常需要验证表单,在单击”提交”按钮是,验证表单内容,例如元素是否是必填字段,某元素长度是否够6位,单表单不符合提交条件时,要阻止表单的提交 eg: $(“#sub”).bind(...); return false;//阻止链接跳转 }); (7)event.which()方法 该方法的作用是在鼠标单击事件中获取到鼠标左中右键,在键盘事件中获取键盘的按键....所有内容:有name,有值(非空)--文本有数据,单选多选选中,下拉列表选中等 字符串:key=value&key=value&....

    8.3K20

    【愚公系列】《AIGC辅助软件开发》021-AI 辅助测试与调试:更多实践

    8.总楼层:必填字段,int类型,若选择的楼栋有返回总楼层信息,则回显到前端总楼层输入框。9.面积:必填字段,float类型,最多支持输入2位小数,单位平方米。...- **“其他”选项:** 验证楼层下拉框的最底部是否有“其他”选项,点击后切换为int输入框,并能够接受2位字符的输入。8....用户需按步骤填写各项信息以获取房号价格。**详细需求**:1. **省份字段**: - 下拉列表展示用户有查价权限的省份。 - 未开通权限的省份置灰并禁用选择。2....**楼层字段**: - 选择楼栋后,动态更新楼层下拉列表。 - 最底部有“其他”选项,切换为int输入框以支持2位字符输入。7....| 系统弹出帮助文档或显示指导信息,帮助用户理解如何使用页面功能。 |如果需要更多测试用例或有其他要求,请输入“继续”以进行下一步。

    11910

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

    一、Overview angular 入坑记录的笔记第三篇,介绍 angular 中表单控件的相关概念,了解如何在 angular 中创建一个表单,以及如何针对表单控件进行数据校验。...响应式表单 建立表单 由组件隐式的创建表单控件实例 在组件类中进行显示的创建控件实例 表单验证 指令 函数 在表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新,...,从而生成错误信息列表 在进行用户输入数据有效性验证时,在控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板中获取到指定控件的状态信息,之后就可以通过获取错误信息列表来进行反馈 的情况下,对于系统来说,表单是不允许提交的,因此可以将提交事件绑定到表单的 ngSubmit 事件属性上,通过模板引用变量的形式,在提交按钮处进行数据有效性判断,当无效时,禁用表单的提交按钮...ngOnInit(): void { } } 在针对多个字段进行交叉验证时,在模板页面中,则需要通过获取整个表单的错误对象信息来获取到交叉验证的错误信息 <div class="form-group

    18.9K20

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

    要获取自己的API密钥,请访问Google的“获取API密钥”页面。单击步骤1中的GET STARTED按钮,将打开一个弹出窗口,如下图所示: 单击复选框选择“ 地图”,然后单击“ 继续”。...输入此信息后,您的API密钥将显示在屏幕上。将其复制并存储在可以轻松检索的位置,因为稍后您需要将其添加到项目代码中。 获取API密钥后,您可以通过创建MySQL数据库来开始构建应用程序的基础。...http://your_server_ip/digiaddress 您将看到新添加的表单字段和生成按钮,应用程序应如下所示: 此时,如果您在表单中输入地址信息并尝试单击“ 生成”按钮,则不会发生任何事情...常见事件的例子有: 单击HTML按钮 更改输入字段的内容 将焦点从一个页面元素更改为另一个页面元素 一个事件监听器是一个指令,它讲述了一个程序在特定事件发生采取某种行动。...保存此文件,然后再次访问您的应用程序。在状态字段中输入US-NY然后单击TAB以将输入焦点更改为下一个字段。您将看到以下输出: 请注意,您在表单中输入的地理坐标和物理地址显示在地图下方。

    13.2K20

    3分钟短文:十年窖藏,Laravel告诉你表单验证的“正确姿势”

    把Request请求的表单数据原封不动地传入到create方法内, 并写入了数据库。 当然,在Event模型内,我已经加上 $fillable 用于标记那些可以写入数据的字段了,但是仍然不够。...仅指定字段可以写入,但是写什么值没有过滤,是不是缺了一大块。 用户的输入从来都不能直接拿来用,我要做一个关卡,层层把关,有效的数据放进去,无效的数据挡在门外。...字段,要求必填,必须是整型,数位2-5个之间。...' => 'required|string' 视图模板显示错误信息 有了验证规则之后,我们需要承载验证失败的那些错误提示信息。...为了检查是不是表单验证生效了,你可以直接在空白表单,点击“提交”按钮,输出内容大致如下: [pic] 红色警告部分,就是视图模板文件里 $errors 发挥作用了。

    1.7K30

    20个为前端开发者准备的文档和指南8

    2.Gethtml 该站点以网格的格式列出了在W3C和WHATWG说明书里所有关于HTML元素的元素名和描述。如果你单击某个元素,它也可以链接到说明书上,显示该元素是如何被使用的一些代码示例。 ?...Angular Cheat Sheet(Angular参考手册) 它有一部分是Angular2的官方文档,是一个可以根据JavaScript,TypeScript,和Dart选项来查看相关语法的一站式的网站...Angular2介绍链接地址: https://zhuanlan.zhihu.com/p/20058966 TypeScript介绍的链接地址: http://baike.sogou.com/v70611007...更棒的是,它可以单步调试可视化的代码组件,并且可以选择是否把该动态的可视化效果以GIF格式的图片保存。...-1.1]来说明如何在HTML元素里添加权限通知。”

    1.3K50

    13个秘技,快速提升表单填写转化率!

    注册表单只需要几分钟制作时间并且可以嵌入到网站的任何地方。 在本文的结尾,你将知道如何为网站创建高效的的注册表单,以及应该包括哪些内容以达到最佳效果。...使用单列表单 当线索正在填写注册表单,你希望为他们提供简洁的端到端体验,而单列表单是最好的方法。双列注册表单可能会干扰阅读或导致误解字段。...使用内联表单验证 内联表单验证会阻止用户在表单中输入错误信息,并同时发出错误消息以确保用户在修复错误之前无法提交表单。 例如,可能有人输入了不合要求的密码,无效的电话号码,或者邮政编码少了几个数字。...无论是每周一封电子邮件、未来的产品公告、季度公司新闻或年度登记,你的新线索都应该知道他们将何时以何种方式收到你的信息。 这种通知的常见方法是将新线索引导到“谢谢”页面,或者在提交表单后提供内联消息。...Google Sheets允许你制作尽可能深入的电子表格。你还可以通过单击按钮公开共享表单,并以你认为合适的任何方式进行设计。

    2.8K30

    AngularDart4.0 英雄之旅-教程-07路由 顶

    该应用程序仍然运行并显示英雄。 添加路由 应该在用户点击按钮后显示英雄而不是自动显示。 换句话说,用户应该能够导航到英雄列表。...在构造函数中注入HeroService,并将其保存在一个专用的_heroService字段中。 调用服务来获取Angular ngOnInit()生命周期钩子中的英雄。...要在其他地方导航,用户可以单击AppComponent中的两个链接之一,或单击浏览器的后退按钮。...相反,您将在自己的页面上显示英雄细节,并按照您在仪表板中所做的方式路由到它。 进行这些更改: 从模板的最后一行删除元素。...你走过的路 以下是您在此页面中所取得的成果: 您添加了Angular路由器来浏览不同的组件。 您了解了如何创建路由器链接来表示导航菜单项。 您使用路由器链接参数导航到用户选择的英雄的细节。

    17.6K30
    领券