如何设置angular form的验证器，如果它已经具有无效值，则会检测到错误
Angular是一种流行的前端开发框架，它提供了丰富的功能来简化表单验证的设置。在Angular中，可以使用内置的验证器或自定义验证器来检测表单的有效性。
要设置Angular表单的验证器，可以按照以下步骤进行操作：
- 导入所需的模块和类：
- 导入所需的模块和类：
- 创建一个FormGroup对象来表示整个表单，并在其中定义FormControl对象来表示每个表单字段：
- 创建一个FormGroup对象来表示整个表单，并在其中定义FormControl对象来表示每个表单字段：
- 其中，
fieldName是表单字段的名称，Validators.validatorName是要应用的验证器。可以使用内置的验证器，如Validators.required（必填字段）、Validators.minLength（最小长度）等，也可以自定义验证器。 - 在HTML模板中绑定表单控件和验证器：
- 在HTML模板中绑定表单控件和验证器：
- 在上述代码中，
formGroup指令将表单与FormGroup对象进行绑定，formControlName指令将表单字段与FormControl对象进行绑定。通过form.get('fieldName')可以获取到特定字段的FormControl对象，从而可以检查其有效性。 - 可选：显示错误消息。
在上述代码中，使用了
*ngIf指令来检查表单字段的有效性。当字段无效且已经被触摸（用户与字段进行交互）时，将显示错误消息。
以上是设置Angular表单验证器的基本步骤。根据具体需求，可以使用不同的内置验证器或自定义验证器来满足特定的验证需求。
关于Angular表单验证的更多信息，可以参考腾讯云的相关文档和示例代码：
相关·内容
https://change-validation-form.stackblitz.io 我正在尝试使用表单，我需要它们根据分配给组合的值来更改它们的验证。这是奖学金的折扣。它可以是数量或百分比。如果它是一个百分比，我需要验证它不大于100。 我正在使用FormGroup。在angular中，我没有找到一种方法来建立输入的验证并标记错误，而不必编写其他东西来<e
浏览 6提问于2019-09-20得票数 0
1回答
在单元测试环境中，Angular应用验证类似乎存在一个问题。我所说的验证类是指ng-valid和ng-invalid。我使用的Angular版本是8.2.14。如果在浏览器中呈现它，则在进行任何交互之前，输入将具有以下类名：ng-untouched ng-pristine ng-invalid。这正是我们所期望的:输入是必需的，值是一个空字符串，因此它是无
浏览 19提问于2020-06-08得票数 0
回答已采纳
$invalid">form invalid!<button ng-click="clearViaEmptyString()">clear via empty string</button></div>
假设用户输入了一封无效的电子邮件在'Cancel‘按钮的ng-click处理程序中，如果我将模型的值设置
浏览 1提问于2015-02-05得票数 4
回答已采纳
6回答
MVC 5远程验证
、、、、
我已经在我的自定义控制器中创建了一个操作，并用它装饰了字段：[Remote("CheckValue", "Validate"), ErrorMessage="Value is not valid"]问题是，当我按下submit时，表单正在提交，如果用户输入的值无效
浏览 1提问于2014-07-21得票数 24
3回答
如何在提交时验证反应式表单？
、、、、
我正在为我的申请使用反应式表单，我想在提交时验证表单，但我无法做到这一点。这是我的代码，任何人都可以让我知道我做错了什么或遗漏了什么。这是我的表单生成器import { IonicPage, NavController, NavParams,ViewController, FormControl } from '@angular/forms'
浏览 0提问于2018-09-18得票数 0
2回答
我实现了typeahead脚本，这样当有人开始输入输入字段时，值就会显示在字段上方。如果定义的值是banana、apple和beer，并且用户开始键入"ba“，则会出现带有值banana的列表。如果用户点击来自typeahead的香蕉值，它将通过javascript分配到输入字段中。
如果选择的值不是来自typeahead列表，我想使输入字段和整个表单<
浏览 15提问于2016-07-15得票数 2
回答已采纳
我的公司有主题需求，并要求我对AngularJs做一些研究。为此，我想展示一下如何使用Angular来实现我们的主题。这是我所拥有的HTML，它工作得很好。<form name="frmLogin" ng-submit="submit()" novalidate>
<div class="form-field" data-ng-class="{'
浏览 1提问于2014-06-22得票数 0
2回答
，将得到模型绑定器的以下不同行为：
此ErrorMessage显示在页面的验证摘要中。如果我在输入元素(比如"25:12" )中输入一个无效的时间，那么该属性<em
浏览 2提问于2013-05-04得票数 0
回答已采纳
在表单中，如果某些字段包含任何验证错误，则将其设置为空白。例如，如果我有一个名为price的十进制字段，并且它的蓝色值无效，我希望将该字段设置为none。这将用于通过查询字符串生成搜索筛选器，因此如果有更好的解决方案，请告诉我。)
我希望表单能够以不使表单无效的方式处理无效字段值</e
浏览 0提问于2013-03-04得票数 1
我想验证表单域的URL。我已将该字段的默认值设置为http://.如果用户没有输入URL，并留下了http://，，则会显示无效URL。URL不是必需的，所以如果它只是http://，，它应该不会显示错误消息。如果用户提交http://作为URL，我如何</e
浏览 0提问于2011-01-24得票数 2
回答已采纳
4回答
我处于困境中，而Javascript世界--这是非常奇怪的。
一些表单具有验证事件，如果存在错误(例如输入中的无效值)，则会阻止提交。如果用户在页面加载时单击表单过快(由于自动完成)，并且仍然没有检索令牌，则请求返回错误。。
当我试
浏览 5提问于2020-05-26得票数 1
回答已采纳
4回答
通过这样做，我试图关闭控制器中所有动作方法的请求验证：public class MyController : Controller ...我正在使用的引用说，这是可能的，并告诉我这样做，但出于某种原因，它是行不通的。如果我通过文本框提交任何html (甚至是一个简单的标记)，则会得到以下错误：
从客户端( “)检测到潜在危险的</e
浏览 3提问于2009-07-10得票数 11
回答已采纳
我已经创建了一个，并试图在其中添加HTML5验证。在我的框架中，验证是通过使用data-属性将验证--约束绑定到元素来完成的。例如，如果使用type="url"的元素具有无效的URL值，对于带有type="email"的元素具有无效的电子邮件。但是，对于像type=&qu
浏览 1提问于2013-03-13得票数 5
回答已采纳
3回答
问题：如何从历史中删除以前的路由url，从而使浏览器"back“按钮跳过它？
在我的应用程序中，如果数据无效或其他问题- Angular执行重定向到错误页。但是，如果要在浏览器-用户中按“后退”按钮，则会再次重定向到错误页面，然后从那里重定向到错误页面。所以这是一种无止境的循环。这样做的目的是从历史记
浏览 14提问于2019-11-21得票数 3
回答已采纳
我的文本框是：
<input type="text" class="form-control textbox" data-bind="value: nameValue, , event: { 'keyup，我已经将验证器连接到这个文本框上，它显示了错误“字段是必需的”。如果它们在textbox中输入无效的值，则在我
浏览 0提问于2018-03-23得票数 1
回答已采纳
我有一个名为valid-number的验证指令，用于使用$setValidity设置表单的有效性-它适用于我在输入框中键入的任何文本值，并将该指令作为属性应用到这些文本框中。HTML是<input name="amount" type="text" ng-model="amount" required
浏览 1提问于2013-06-09得票数 10
回答已采纳
1回答
我想在我的输入中添加一个错误！如果位密码匹配，该函数将返回true，否则它将返回false，如何在mat错误中调用布尔函数！this.changePassForm.value.Nouveaumotpasse; if (pass === confirmPass) { }
错误：
<mat-error *ngIf=" "> Not matching
浏览 4提问于2022-03-22得票数 0
回答已采纳
2回答
我有一个输入HTML字段，它接收日期。当发生这种情况时，它会激活字段上的验证控件，如果日期不正确，我会得到一个错误。现在，我需要将从Firestore获得的值设置为此输入，并使用 (<HTMLInputElement>document.getElementById(id)).value = value 要做到这一点。它工作得很好，但是验证器无法识别该值。我想知道
浏览 18提问于2019-06-11得票数 1
回答已采纳
2回答
计划:创建一个获取单个字符串的表单域，但在其中包含自己的表单，该表单添加对confirmPassword字段的验证。Error: ExpressionChangedAfterItHasBeenCheckedError: Expression我在网上找不到很多关于这方面的文档，我不确定什么时候是将错误添加到errors对
浏览 8提问于2019-02-20得票数 0
使用JSF2.0：
用户使用绑定到具有现有值的后台bean字段的输入字段加载页面。输入字段已按要求进行标记。如果用户然后删除该字段并提交表单，则会出现所需的消息，但在呈现页面时，该字段的值将被替换为其原始值，而不是将该字段保留为空白。此行为与当字段上存在格式验证错误(vs所需的验证错误)时发生的情况不一致，例如
浏览 5提问于2012-04-06得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
