Angular reactive表单，输入提交空数据，但按钮提交工作
Angular reactive表单是Angular框架中的一种表单处理方式。它基于响应式编程的思想，通过使用Observables来处理表单的输入和状态变化。
当用户在表单中输入数据时，Angular reactive表单会实时地捕获并更新表单的状态。如果用户提交了空数据，即没有输入任何内容，可以通过以下步骤来处理：
- 验证表单数据：在Angular reactive表单中，可以使用Validators来验证表单字段的输入。可以通过设置必填字段、最小长度、最大长度等规则来确保输入的有效性。
- 禁用提交按钮：在表单中添加一个提交按钮，并使用Angular的属性绑定来控制其禁用状态。当表单数据无效时，即为空数据时，可以将提交按钮禁用，防止用户提交无效数据。
- 提示用户输入数据：可以在表单中添加一些提示信息，告诉用户需要输入有效数据才能提交。可以通过Angular的模板语法来显示或隐藏这些提示信息，根据表单字段的状态来动态控制其显示与隐藏。
- 提交表单数据：当用户输入有效数据并点击提交按钮时，可以通过Angular的事件绑定来触发提交表单的操作。在提交表单的处理函数中，可以获取表单字段的值，并进行进一步的处理，例如发送HTTP请求将数据保存到服务器端。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。
- 腾讯云云服务器（CVM）：提供高性能、可扩展的云服务器实例，可用于部署和运行应用程序。可以根据实际需求选择不同配置的云服务器，满足不同规模和性能要求的应用场景。产品介绍链接地址：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL：提供稳定可靠的云数据库服务，支持高可用、高性能的MySQL数据库。可以方便地进行数据存储和管理，适用于各种Web应用、移动应用和大数据分析等场景。产品介绍链接地址：https://cloud.tencent.com/product/cdb_mysql
相关·内容
1回答
Angular reactive表单，输入提交空数据，但按钮提交工作
angular、angular-reactive-forms
filterForm.valid">Apply</button> </form> 当用户按enter键时，表单提交，但是输入值都为空。但是，如果用户按下submit按钮，它将按预期工作。 ...它在UI中有点脏，但反应是一样的。打开您的控制台。如果输入值并按enter键，则表单值为null。如果您输入值并按下
浏览 18提问于2021-04-06得票数 0
1回答
如何在特定输入标记下子组件angular4中传递和显示来自服务的验证错误
angular、validation
我正在使用Angular 4 reactive表单，并创建了一个指令(分别称为父输入和子输入)来显示每个输入字段下面的错误。如果有人写入并删除内容，错误将显示在该字段下面(创建了一个新的div元素)，但现在我希望在提交表单时显示父组件和子组件中的错误(提交按钮在父类中)
浏览 10提问于2018-12-29得票数 0
1回答
angular-cli表单验证
angularjs、validation、npm、angular-cli
button> </div>
这是app.component.ts的代码 } }
这是app.module.ts的代码
import { BrowserModule } from '@angular/pl
浏览 17提问于2017-08-30得票数 0
回答已采纳
2回答
为什么隐藏的输入字段值不能为空
php、multipartform-data
我使用PHP表单发送用户注册数据，然后用PHP表单处理它。我需要注册一些用户类型，如“普通用户”、“管理用户”、“编辑启用用户”等。每种用户的详细注册请求是不同的。当我单击“提交”按钮时，会显示一条错误消息。
<input type="hidden" id="companyname" name="companyname" value="">
<
浏览 25提问于2022-05-12得票数 0
回答已采纳
6回答
按钮类型" Button“与"submit”
html、html-input、htmlbutton
带type="button"的button和type="submit"有区别吗？是否存在功能差异，或者只是为了便于代码阅读而使用的描述性名称？
浏览 3提问于2016-06-10得票数 32
2回答
Angular5 -更改检测不显示，除非单击或按下键
angular5
我在我的Angular5应用程序中有一个问题，它需要额外的单击或键盘上的任何按键来呈现我的组件。我已经尝试添加cd.detectChanges()，也尝试使用blur()方法来移除搜索框上的焦点(用户输入一些文本并在输入框上按enter键，然后我应该呈现一些与该搜索相关的组件)。我甚至尝试手动生成单击事件，但什么也没有发生。任何帮助都将不胜感激。耽误您时间，实在对不起!
在Angular 2上有一个类似的帖子，但我已经尝试了那个帖子中提到的所有解决方案。-
浏览 2提问于2018-03-13得票数 1
3回答
为什么使用ngSubmit而不是onSubmit
angular、angular2-forms
为什么使用ngSubmit来提交表单而不是在第2角的submit按钮上使用onSubmit。
浏览 1提问于2016-10-03得票数 3
回答已采纳
2回答
Angular reactive表单以编程方式提交，不使用按钮
html、angular、typescript、angular-reactive-forms
当表单中的所有字段都有效时，我想自动提交表单。 如何触发有代码但没有按钮的表单提交？下面是一个示例表单： <form [formGroup]="dummyForm"> <input type="text" formControlName="dummyText" ng-change="autoSubmit()"
浏览 31提问于2020-08-04得票数 0
2回答
是否应该在Angular js中将表单输入值声明为空？
angularjs、forms
我在angular js中有一个简单的表单，在这个表单提交中，我没有得到任何输入值。然后我必须声明输入模型名为空，它正在工作。我得到输入值。我怀疑，我们是否应该在提交表单之前将输入变量名声明为空？var login = angular.module("loginApp",[])
.controller("loginC
浏览 0提问于2016-02-19得票数 0
1回答
Angular reactive表单在未提交的情况下被汇总
angular、forms、typescript、angular-reactive-forms
我正在创建一个angular 5 reactive表单。一切都很好，但我有一个按钮来关闭表单，即隐藏它从显示。当我点击那个按钮时，表单被提交了，就好像我点击了submit button.What是这个奇怪问题的原因吗？
即使我从关闭按钮中删除了(单击)事件，它仍然提交，就像提交按钮一样。
浏览 4提问于2018-03-01得票数 1
回答已采纳
1回答
表单提交操作未执行时
php、html
我正在制作一个基本的注册表，我的代码不工作，我尝试解决问题，但我在我的代码中没有看到任何问题。当用户提交表单时，页面不会转到register.php 下面是我的connect.php代码： <?
浏览 24提问于2019-01-28得票数 0
回答已采纳
1回答
不读取最后选项值
javascript、php、html、mysql
这段代码可以很好地连接到数据库，并完成我设置的几乎所有事情。但是，当我从下拉列表中选择最后一个值时，它不会给出它的值，这是不分原因的。这是我想要的一个例子。更新:我工作的人找到了一个更好的解决方案，使用JQuery解决了这个问题。谢谢所有帮忙的人。
浏览 0提问于2016-01-06得票数 4
2回答
HTML5必填字段，并使用angularjs提交
javascript、html、forms、angularjs、twitter-bootstrap
在javascript中提交表单之前，如何检查表单的必填字段？<input type="text" name="truck" ng-model="my model" typeahead="my typeahead" typeahead-min-length="1" required/>
下面是我在表单<
浏览 0提问于2014-02-10得票数 1
1回答
如何标识和删除jsonObject空属性而不对每个属性使用
javascript、angularjs
我的要求是，
默认情况下，提交按钮处于禁用模式，如果用户更改现有数据的形式，那么提交按钮应该更改为启用模式，然后他改变主意并恢复到旧的数据，然后提交按钮应该更改为禁用模式。用户更改表单中的任何字段，我使用angular.equals(obj, tempObj)方法将表单数据与临时表单数据进行比较。这些代码更改只适用于一种方式，即用户更改
浏览 0提问于2018-04-25得票数 1
1回答
Span值在单击后消失。
jquery
当用户从下拉列表中选择一个选项时，所选的选项(文本)将显示在span中(id="myoption")，但单击submit按钮后，span值将消失。
浏览 10提问于2022-04-11得票数 0
3回答
需要的html不能与onclick一起使用
javascript、html
我在我的网站上有以下用于提交表单的工具：我在表单中输入了所需的标签，但这似乎没有触发它们？意思并不能阻止空输入的提交。
浏览 2提问于2012-01-30得票数 3
回答已采纳
1回答
使用PHP/MySQL逐行从数据库获取数据生成二维码
php、html、mysql
基本上，我使用学生的I和其他信息为学生生成代码，同时从数据库中获取数据。但问题是，当我点击提交按钮，让表格数据存储在二维码中，那么它只生成最后一个学生的二维码。我在每一行上创建了提交按钮，这样当我单击提交按钮时，就会将该特定行的数据提交到QR image。但问题是，当我点击任何行的提交按钮时，它会生成表中最后一个学生的qr图像。
浏览 25提问于2019-06-22得票数 1
4回答
onClick没有在表单中工作吗？
javascript、jquery
通常，我看到人们使用表单来创建输入：<table> <td><label for="Fname">First Name</label<td><input type="submit" value="submit" onclick="submit();"></td>
浏览 4提问于2016-11-21得票数 1
回答已采纳
2回答
表单提交按钮未将名称传递给php
php、jquery、ajax
可能是一个非常简单的答案，但这是我一直在努力解决的问题。我有一个基本的表单，其中有一个标准的提交按钮。当它被点击时，它被jquery序列化，然后是Ajax来处理php页面等等。我不明白为什么当用户点击提交按钮时，提交按钮的名字没有被张贴出来。我能想到的唯一原因是serialize只处理文本、文本区和select元素。如果是这样，我如何将名称发送到php进行处理。谢谢<!
浏览 0提问于2013-06-26得票数 1
回答已采纳
2回答
Angular:有条件地触发选择性表单验证
angular、angular-reactive-forms、reactive-forms
Angular:有条件地触发选择性表单验证 我使用了一个带有验证的反应式表单-- 'required‘和其他的表单字段，比如min，max等。表单中有两个按钮-“保存”和“提交”。保存和提交按钮上的事件会将数据保存到中间状态，并根据后端逻辑分别提交。 对于Submit按钮，我已经禁用了它，直到表单通过属性绑定disabled属性到表单的
浏览 38提问于2019-03-09得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
