添加ng-选择未显示的反应式表单验证消息
ng-选择未显示的反应式表单验证消息是指在Angular框架中，用于验证表单输入的消息未被显示出来的情况。在Angular中，可以使用响应式表单验证来验证用户输入的数据是否符合预期的要求。当用户输入不合法时，可以通过ng-选择未显示的反应式表单验证消息来获取相应的错误消息。
这个功能的优势在于可以提供实时的、动态的表单验证反馈，帮助用户及时发现并纠正输入错误，提高用户体验。同时，它也可以帮助开发人员更好地管理表单验证逻辑，简化代码编写和维护。
应用场景包括但不限于：
- 用户注册页面：可以通过ng-选择未显示的反应式表单验证消息来验证用户名、密码、邮箱等输入是否符合要求。
- 订单提交页面：可以通过ng-选择未显示的反应式表单验证消息来验证用户输入的收货地址、手机号码等是否正确。
- 调查问卷页面：可以通过ng-选择未显示的反应式表单验证消息来验证用户输入的答案是否符合要求。
对于ng-选择未显示的反应式表单验证消息，腾讯云提供了一些相关产品和服务，例如：
- 腾讯云服务器less云函数（SCF）：用于处理表单验证逻辑的后端服务，可以通过云函数来实现表单验证的业务逻辑。
- 腾讯云API网关（API Gateway）：用于接收和处理表单验证请求的网关服务，可以将表单验证请求转发给后端服务进行处理。
- 腾讯云COS对象存储：用于存储表单验证消息的相关数据，可以将验证结果保存在COS中，以便后续查询和分析。
更多关于腾讯云相关产品和服务的详细介绍，请参考腾讯云官方网站：腾讯云。
相关·内容
1回答
ng-最大长度不工作
、、、、
我有一个Angular 4应用程序。我正在尝试向表单输入添加验证，其中包含数字的输入不应接受超过4位的数字。如果更多，它应该使表单无效。我使用的是反应式表单。这就是代码。
<input class="form-control form-control-amount no-z-index"
id="forNumber"
name="forNumber"
formControlName="forNumber"
ng-required="true"
type=
浏览 10提问于2017-12-13得票数 0
回答已采纳
我的需求是以这样一种方式执行响应式表单字段验证，即只有在用户停止键入后才显示错误消息。
如何使用reactive forms和Rxjs debounceTime完成此任务？
我正在寻找一个与反应式表单一起工作的解决方案
浏览 6提问于2018-06-07得票数 13
回答已采纳
我有2个表单，所以点击保存按钮，我想显示一条警告消息，如果必填字段没有填写。所以，我已经给出了验证消息和所有的，它工作得很好，但现在我需要带来一个表单的整个部分时，点击添加按钮，所以在这里我得到了验证错误的第二个表单的所有时间，即使字段是填写的。我不知道我错在哪里。 TS： saveDetails() {
this.submitted = true;
let errorMesage = '';
let errorBasic = this.agentbasicInfoForm.invalid || !this.agentbasicInfoForm.di
浏览 29提问于2020-01-17得票数 0
我正在开发一个Angular (12)反应式表单，表单控件值之间有许多直接和间接的依赖关系。例如:税率取决于所选的国家、日期和所选的收款类型，但也可以手工设置。税率的更改会触发净金额的更改。但也可以手动设置净额，从而导致总金额的变化。以此类推。 我试图通过窗体控件valueChanges订阅和控件组件的模糊事件来处理这些依赖关系，但这最终导致了一个事件处理程序地狱，其中一个更改覆盖了另一个更改。 以一种干净、清晰和可维护的方式处理Angular reactive窗体控件之间的复杂依赖关系的方法是什么？我找不到一个合适的例子。
浏览 15提问于2021-10-05得票数 2
在向我的后端提交表单时，我可能会得到一个http代码为400的响应，表明验证失败。
我的后端响应如下：
{
"status":"fail",
"data":{
"email":[
"Email address already in use"
]
}
}
我想使电子邮件字段无效，并根据响应设置错误消息。
我尝试的是这样的：
if (err && err.status === 400) {
const response = err.
浏览 3提问于2016-11-07得票数 3
1回答
因此，我有一个(Angular 10)反应式表单，其中有许多输入组件，每个组件都是在ngFor循环中动态创建的： <div [id]="this.getDivElementId()" class="textinput dynControl" [formGroup]="this.parentFormRef" >
<input [name]="this.controlData.name" [id]="this.controlData.name" type="text" [at
浏览 17提问于2021-03-23得票数 0
回答已采纳
在包含最小和最大两个字段的反应式表单组上工作时，数据来自硬编码的数组数据。当我们在相应的字段中输入值时，只是想显示最小值应该大于最大值的验证
浏览 1提问于2018-12-28得票数 0
1回答
Ng-消息动态表单和输入名称
、、、、
tl;dr；
似乎ng消息指令不能被排除。当你转换它时，它不能正确地绑定。我有两个解决办法，但都有各自的缺点。谁有更好的解决方案，还是我做错了什么？
我在用打字本。
版本
AngularJS: 1.6.1
角-动画: 1.6.1
角角: 1.6.1
角度信息: 1.6.1
角度材料: 1.1.0
TypeScript: 3.10.5
我想要什么
我有一个组件来格式化一个日期(做一些更多，但这是不相关的)，并显示它。其中一些组件包含在同一页上。围绕这些组件的是一个表单。我想用自定义ng消息来验证这个表单，比如在将来的日期显示错误消息。
有什么问题？
当我将自定义错误消息转换到组件时，绑定将
浏览 3提问于2017-01-18得票数 3
回答已采纳
我正在学习angularjs，并使用ng显示和表单验证，但它不起作用。我应用了表单的名称. it的名称.$ error &&！表单的名称.it的名称.$原始到我的错误消息跨度，但是它失败了，没有错误消息输出。我还试图看到user_form.username.$pristine的价值，但什么也没有发生。控制台上没有显示错误消息。你能帮我找出原因吗？
<form id="user_form" name="user_form" ng-submit="register()" novalidate>
浏览 6提问于2016-06-02得票数 0
回答已采纳
我试图从架构评估的角度来理解Angular 6输入表单。模板驱动的表单是一种选择。根据我在网上读到的内容，模板驱动的表单通常被认为是“入门表单”，或者对于从AngularJs过渡过来的开发人员来说可能更自然。
反应式表单是另一种选择。根据我在网上读到的内容，反应式表单通常被认为比模板驱动的表单更有能力，更灵活，更可测试。这看起来是一个准确的评估吗？
我只浏览了一下文档，但它表明动态表单提供了一种快速而简单的方法，可以完全从元数据生成表单。
因此，动态表单似乎将是架构评估的起点b/c，这种方法将通过消除大部分UI工作来简化开发过程。你有没有遇到过动态表单不足的特殊情况？或者通常有没有简单和结构化
浏览 2提问于2018-09-03得票数 1
在AngularJS中，有一个名为ng消息的表单指令，它帮助我们创建它，这样就不会同时显示所有的表单错误。因此，例如，如果输入有3个错误:必需、最小长度、最大长度。然后只有required出现，在required有效之后，就会显示最小长度。如果没有ng消息，我们将需要执行一些非常复杂和丑陋的逻辑，以便只显示所需的而不是其余的，同时还考虑到只有当表单控件也是脏的/触摸的并且无效时，才应该显示错误。
在AngularJS中，这可能类似于：
<div ng-messages="form.username.$error" ng-if="form.username.$tou
浏览 3提问于2017-02-10得票数 20
回答已采纳
1回答
我用的是反应式的日期选择器
该示例在模板驱动的form..am中使用了反应性形式。
是否有人使用反应性表单数据选择器..How来执行此操作？请让我知道我需要(只显示DD-MM)并将日期发送到服务器...thanks。
浏览 6提问于2020-11-29得票数 0
回答已采纳
我使用ng-messages向表单验证显示错误消息。我的应用程序是多语言的，我如何在多语言中使用ng-messages？
html表单
<div class="messages" ng-messages="myForm.email.$error">
<div ng-messages-include="messages.html"></div>
</div>
messages.html
<script src="https://ajax.googleapis.com/ajax/l
浏览 2提问于2015-09-01得票数 4
1回答
标题看起来有点让人困惑，所以让我解释一下。
按钮确实有.setEnabled("false")属性，在这种情况下，它将被禁用，即您将无法单击它。然而，出于美观的原因，我希望它是可点击的(就像调用了.setEnabled("true")一样)，但功能将被禁用。如果用户完成了特定的表单，他们可以提交表单，否则会收到一条错误消息。
我尝试的:Button.setEnabled的这件事(False)
sap.ui.getCore().byId("Button").setEnabled(false)
预期结果:要使表单可点击，但如果表单未完成，则应显示一条
浏览 18提问于2019-08-14得票数 0
回答已采纳
2回答
我有一个有角的JS形式如下：
<div ng-controller="EmpController as empVm"
name="formEmployee" ng-form >
<div>
<div class="col-sm-5">
Email
</div>
<div class="col-sm-7">
<inpu
浏览 3提问于2017-08-17得票数 0
回答已采纳
我在Angular6中使用了一个简单的反应式表单。
this.phoneForm = this._formBuilder.group({
oldMac: new FormControl('', Validators.compose([
Validators.required,
Validators.pattern('')
])),
newMac: ['', Validators.required],
newModel: ['', [Validators.required]],
targetClu
浏览 1提问于2019-01-22得票数 1
2回答
如果我想在我的Angular应用程序的Template-Drive/Reactive-Driven表单中的textarea标签中检测到某个字符串，我想禁用一个按钮，我该怎么做？关于这些信息，哪些资源是最好的？
浏览 18提问于2021-03-30得票数 0
我使用的是AngularJS 1.3.0 RC0和角消息。ng-消息尽职尽责地显示那些“必需”字段的错误消息，当表单最初加载并且原始时。因此，新加载的表单页中充满了错误消息。这不是我想要的。如何使所需字段的ngMessage仅显示这些字段是脏的还是提交了表单？
我读过官方医生，一点线索都没有。并试图将"ng-show =“fieldName.$脏”“放入ng-messages div中，但没有工作。任何帮助都将不胜感激！
浏览 0提问于2014-09-03得票数 43
回答已采纳
我有以下的Angular SignUp表单： <form [formGroup]="signUp" (ngSubmit)="onSubmit()">
<input id="email" type="text" formControlName="email" placeholder="Email">
<input id="email" type="password" formControlName="password
浏览 7提问于2019-02-22得票数 3
回答已采纳
我在Ruby on Rails中使用进行在线购买。其中一种状态是用户在表单中填写账单信息。此表单是必需的，因此我在转换到下一个状态时对其进行验证，如下所示：
state :confirm do
validates_presence_of :name, :email
end
其中表单在状态:info上，下一个是:confirm。
这可以很好地工作:如果缺少任何字段，state_machine将不会转换到下一个状态。但是，当验证返回false时，我找不到有关如何显示错误通知的信息。我希望在验证失败时显示一条消息，并重定向到窗体状态。提前感谢您的帮助！
浏览 0提问于2013-03-13得票数 0
我目前正在使用*ngIf动态生成表单输入，如果该表单在DOM中输入我们，那么它是必需的，如果不是，则不应该被要求。
我如何使用反应式表单方法来实现这一点？
HTML
<select formControlName="input" name="input">
<option value="1">1</option>
<option value="2">2</option>
</select>
<div *ngIf="input ===
浏览 0提问于2018-08-16得票数 0
我正在使用Jquery验证插件进行表单验证。
我只是使用这个作为示例。
有一个问题。第一次加载表单时。单击第一个字段，不要将任何内容放在那里，然后单击"tab“按钮移动到下一个输入字段，错误消息没有显示，但该字段被标记为”必填“。
有没有办法解决这个问题？或者这就是它应该是的样子。
浏览 0提问于2011-07-22得票数 0
1回答
我使用的是引导多选择插件
<select class="btn btn-default col-md-1" name="fw_dropdown" id="fw_dropdown" multiple="multiple" required="required">
@foreach (var fw in Model.FWIndex)
{
<option value="@fw">
浏览 2提问于2016-06-08得票数 0
回答已采纳
我正在使用Adobe Livecycle ES2。我的代码没有问题，但是我所有的验证都以列表的形式显示在一个消息框中，这不是我想要的。我希望它们在用户离开每个正在验证的字段后显示。我尝试了像File>Form Properties>表单验证这样的解决方案，但我没有表单验证选项。我想知道我是否可以通过javascript编码让它工作。
浏览 2提问于2015-07-25得票数 0
在角度2中，模板驱动形式和反应形式之间的区别是什么。在哪些情况下，我们需要使用模板驱动表单和反应式表单
浏览 0提问于2017-07-24得票数 25
1回答
我有一个带有字段的表单，当该元素具有ng:无效时，我将显示另一个包含错误消息的表单(这是一个工具提示)。
但是，我需要让工具提示根据字段无效的原因显示不同的消息。例如：
如果用户没有输入任何值，则应该显示“必需”。
如果用户没有输入有效的电子邮件地址，则应显示“请输入一个vaild电子邮件地址”。
如果用户输入了一个存在的电子邮件地址(例如，在本地数组中)，那么它应该显示一个不同的消息。诸若此类。
既然ng:无效将被设置，即使其中一条规则失败，我需要一种方法来区分规则和识别失败的规则，然后根据它为工具提示设置HTML。
做这件事的“角度”是什么？
编辑:我能够解决这一部分使
浏览 2提问于2014-11-17得票数 0
回答已采纳
使用电子邮件字段时，尝试提交具有无效电子邮件地址的表单，并出现如下错误：
我喜欢的是：
不重新加载页面，而是根本不提交，而是显示错误。
看上去
以下是我目前能够用名称和密码(CharFields)完成的任务
“需要一个名字！”而“此字段是必需的”消息只在表单提交后显示，而不需要提交表单也不像显示时那样流畅。
浏览 4提问于2015-06-13得票数 0
回答已采纳
2回答
我正在将AngularJS 1.6应用程序迁移到角12。我在将表单迁移到角模板驱动的表单时遇到了问题：
<form novalidate #myAwesomeForm="ngForm" name="myAwesomeForm">
[...]
</form>
它包含子组件内部的输入字段：
<my-child-component
[model]="myModel"
[fieldId]="'someText'">
</my-child-component&
浏览 2提问于2022-01-24得票数 0
1回答
我有一个关于form about表单验证的问题。我的表单的一部分是动态的(调用其他组件)。 这是我的表格： <form [formGroup]="deliveryService.deliveryForm" >
<!--Common input field-->
<div #name class="QTZ_form_group QTZ_valid">
<div class="QTZ_form_dropdown&
浏览 18提问于2019-05-03得票数 0
我不希望ng-消息继续显示，直到用户输入有效的输入。所以我想隐藏信息，比如说，在播放5秒后。
我看到全班从ng-活动切换到ng-非活动。
现在，我如何手动设置ng-消息为非活动或隐藏它在几秒钟后？
浏览 7提问于2015-07-23得票数 1
回答已采纳
1回答
角度上的动态形式
、、
我们计划将当前的网站(asp.net worbforms)升级为使用angular的单页面应用程序。我对angular还不是很熟悉，但是动态表单在angular上可行吗？(数据库驱动页)
在我们当前的网站上，用户可以通过创建新问题来创建自定义问卷表单示例:问题1：(单选按钮) Y/N“你有驾照吗?问题2：(日期选择器)生日问题3：(文本框)告诉我一些关于你自己的事情问题4：(下拉菜单)国家等。
然后将这些创建的问题保存到数据库中，然后加载到页面上供用户回答，并将他们的答案保存在数据库中。因此，每个表单都是不同的，这取决于它的创建者。
这在angular上是可行的吗？
浏览 7提问于2019-11-07得票数 0
1回答
我有9个选择框在我的网页上，包含许多子类别的企业。我要求用户只从9个选择中选择一个选项。为了使用户体验更好，我用CSS隐藏了所有的选择框，并生成了一个类别的动态选择框。当从生成的下拉列表中选择类别时，将显示由CSS隐藏的子类别选择框。
我的问题是当我提交表单时，验证似乎不起作用。在使用firebug进行进一步检查时，看起来验证确实会触发，但只针对第一个隐藏的复选框(饮食)。如果你看一个例子页面，我把所有的东西都整理好了，就像我希望的那样：
无类别提交表单显示错误消息无子类别提交表单显示错误消息更改类别或子类别为空白显示错误消息
如果您选择任何其他类别并将子类别保留为空白，则会收到一条错误消息
浏览 2提问于2010-07-03得票数 1
我在Angular2中有一个类似这样的表单：
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input type="text" id="name" formControlName="name" value="{{elementToEdit?.name}}">
<button type="submit" [disabled]="!form.valid">Save</
浏览 0提问于2017-03-04得票数 1
回答已采纳
我有以下的角度app.component.ts文件
import {NgModule} from '@angular/core';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
浏览 0提问于2020-09-30得票数 0
我想使用ng消息来显示角形式的验证消息。然而，
我希望每个字段都隐藏这些消息，直到$touched为真为止。
我希望在每条消息出现/消失时都有CSS转换。
我有以下HTML
<form name="myForm">
<input name="myInput" type="text" required ng-model="myValue">
<ng-messages for="myForm.myInput.$error" ng-if="myForm.myI
浏览 3提问于2016-05-18得票数 1
1回答
我的应用程序有一个步进器，其中一个步骤里面有两个表单，主表单和另一个表单。主窗体是步骤控件所需的窗体。另一个表单是可选的(但如果用户输入任何输入，我仍然希望验证输入)。这两种形式都是反应式形式。
问题是，当我尝试移动到stepper中的下一步时，另一个表单正在被验证并显示所有错误(尽管它不是step控件)。
我希望的行为是，当我单击下一步时，它不会影响其他表单，只验证主表单，我可以做什么来实现它？
谢谢!
微风
浏览 14提问于2018-12-22得票数 1
2回答
我有下面的表单，其中列出了问题，并有一个答案字段。来自api的循环列出的问题，所有问题都需要具有相同的字段名。一切正常，问题是我不能提交除了最后一个表单值之外的所有表单值。有没有办法将一个表单控件名称用于多个域。
move-maker-add-component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroupDirective, FormBuilder, FormGroup, NgForm, Validators } from '@angular/
浏览 0提问于2019-04-30得票数 2
回答已采纳
我真的找到了一个解决方案。它正在尝试运行验证。但只添加了最后一个验证。未显示用于验证的消息。
我搞不懂这件事。我有一个用剃刀创建的表单，如下所示
@using (Html.BeginForm("Search", "WellSearch", FormMethod.Post))
{
@Html.Partial("_DropDownList_Operator", Model)
@Html.Partial("_DropDownList_Lease", Model)
<inp
浏览 0提问于2014-11-26得票数 0
我正在使用angular ag-grid来显示一些来自API的数据。我有一些值作为布尔值，我使用复选框来显示布尔值，如果值为真，我将显示复选框为选中，如果值为假，我将显示复选框为未选中。我的目标是在一行中只选中一个复选框时禁用复选框。我已经在这个链接下创建了一个演示。
在加载时，我可以这样做，但如果我要更改复选框的状态，我想要重新验证。有人能告诉我如何才能做到这一点吗？
浏览 22提问于2021-05-17得票数 1
我预期的结果是在表单提交后重置表单，并设置绑定到formGroup控件的默认值。我试图在提交后通过在表单提交上调用reset()将表单重置为其默认数据。请告诉我如何重置日期和时间字段中的默认值。
示例：
pickupDate = new Date().toISOString().slice(0,10);
pickupTime = moment().format() ;
onSubmit(orderData: Order){
this.apiService(orderData).subscribe( order => {
orderFor
浏览 0提问于2018-04-17得票数 4
我将时间作为分钟的整数存储在数据库/模型中。但是，我想在十进制小时内向用户显示它(并让他们使用许多按钮编辑这个值)。
现在我有这样的想法：
<p class="input-group">
<input type="text" readonly="readonly" value="{{vm.time.minutes|hoursMinutes}}" class="form-control" />
<span class="input-group-btn"&g
浏览 3提问于2016-03-08得票数 0
我需要你的帮助。我有Drupal7CCK表单，这是匿名用户可见的，但当匿名用户填写表单，并点击提交，我想显示用户登录表单，没有页面刷新登录后，cck表单将自动提交和显示感谢消息。我为此寻找了很多，但我没有得到任何解决方案。请帮帮我，我不知道怎么做。
浏览 11提问于2012-08-03得票数 1
1回答
如何通过点击外部链接(即标签外面)来验证angular 4中的表单。如果表单有效，请对表单数据执行一些操作，否则将显示验证消息。如果表单有效，我不想提交表单，只需要获取表单字段的值。
浏览 2提问于2017-09-07得票数 0
2回答
我有一个php脚本，它使用以下代码行提交表单：
<form action = "javascript:void(null);" onsubmit = "load_ajax();" name = "myform">
现在，为了防止机器人滥用表单，我想实现如下所述的reCAPTCHA：
http://www.darksideofthecarton.com/2008/12/15/validating-recaptcha-with-jquery-and-ajax/
reCAPTCHA逻辑工作正常，显示验证成功/失败消息，但表单未提交。下面是我
浏览 1提问于2010-10-04得票数 0
回答已采纳
5回答
我正在使用plugin contact form 7版本5.1.1，如何隐藏底部表单中的显示验证错误或成功消息框...
我已经搜索了很多文章，把这段代码
div.wpcf7-response-output {
display: none !important;
}
我将该代码放在./themes/myproject/style.css中，但它不起作用
那么如何隐藏验证错误或成功消息框呢
浏览 2提问于2019-04-29得票数 2
我有一个反应式表单，并添加了一个自定义异步验证器，通过检查可用值的数组来检查输入的值是否唯一。正在调用验证器，但未将验证错误“duplicate”添加到表单域错误中，也未在模板中显示。我不知道我到底做错了什么。 component.ts private registerFormGroup(): void {
this.titleField = new FormControl(
{ value: this.auditTemplate.title, disabled: true },
[Validators.required],
浏览 31提问于2021-08-13得票数 0
我正在尝试编写一个PHP代码来验证字段中的表单输入。如果该字段已经有值，则系统必须发送错误消息。如果没有值或者值与输入的值相同，则可以提交表单。编辑后的代码为：
/**
* Implement a function to get the ID and the title of the referenced node
* of type Reservation
* by the nodereference field called Period
* in the currently edited node from type Board
* Try to do this by the node_
浏览 0提问于2013-01-31得票数 0
我有一个问题，我刚刚开始进行反应式编程，并且我正在使用quarkus。我用Panache hibernate reactive做了一个演示，用SQL客户端做了一个演示。我希望我的每个rest都运行在不同的非阻塞线程上。使用panache hibernate，每当我执行阻塞操作时，我都会收到一条有关它的消息，日志中显示api正在运行o vertex事件循环线程，所以一切都很好。在反应式客户端中，一切都运行在执行器线程0上，这是否意味着我的apis不是从输入到输出的异步(反应式)，并且当我运行阻塞操作时，没有显示错误。
浏览 34提问于2021-10-10得票数 0
我正在创建一个带有输入元素的模板的指令。通常，当输入在具有独立作用域的指令之外时，您可以访问formName.inputName.但是，当您将它放在带有独立作用域的指令中时，我无法访问外部表单。即使我可以访问它，我也不认为inputName输入控件在表单上是可访问的。我需要查看输入控件上的$dirty、$invalid标志，并使它们的ng-无效和ng-脏类名可用。有这样的事吗？
一个显示我正在做的事情的概要的按钮是。
更多信息:我可以在$scope.$parent上找到表单，但是其中有一个{ inputName }字段，而不是inputName的值。
浏览 6提问于2014-05-19得票数 2
回答已采纳
在我看来，当使用反应式表单时，默认行为是除非经过验证，否则不会提交数据。有没有办法关闭它，这样我就可以提交数据而不需要验证？
浏览 0提问于2018-04-15得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
