开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

角度4 *ngIf未显示自定义验证的错误消息

角度4 ngIf未显示自定义验证的错误消息是指在使用Angular框架中，当自定义验证器返回false时，ngIf指令未能正确显示错误消息。

在Angular中，可以使用自定义验证器来验证表单输入的有效性。当验证失败时，可以通过设置FormControl对象的errors属性来指示错误，并在模板中使用*ngIf指令来根据错误状态显示相应的错误消息。

然而，有时候可能会遇到一个问题，即当自定义验证器返回false时，*ngIf指令未能正确显示错误消息。这可能是由于以下原因导致的：

错误消息的显示条件不正确：在使用*ngIf指令时，需要确保条件表达式正确地判断验证器的错误状态。可能是条件表达式中的逻辑错误导致错误消息未能正确显示。
验证器未正确添加到FormControl对象：确保自定义验证器已正确添加到FormControl对象的验证器数组中。可以使用setValidators方法来添加验证器。
错误消息未正确绑定到模板：确保错误消息正确地绑定到模板中的相应位置。可能是由于模板中的绑定错误导致错误消息未能正确显示。

为了解决这个问题，可以按照以下步骤进行排查和修复：

检查条件表达式：仔细检查*ngIf指令的条件表达式，确保它正确地判断验证器的错误状态。可以使用console.log输出验证器的错误状态来进行调试。
检查验证器的添加：确保自定义验证器已正确添加到FormControl对象的验证器数组中。可以使用setValidators方法来添加验证器，并使用updateValueAndValidity方法来更新FormControl对象的状态。
检查模板绑定：检查模板中错误消息的绑定是否正确。确保错误消息正确地绑定到模板中的相应位置，并且绑定的属性与FormControl对象的errors属性一致。

如果以上步骤都没有解决问题，可以考虑使用其他调试技巧，如使用浏览器的开发者工具进行调试，或者查阅Angular官方文档和社区论坛以获取更多帮助。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
移动应用开发平台（MADP）：https://cloud.tencent.com/product/madp
云存储（COS）：https://cloud.tencent.com/product/cos
区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe

相关搜索:未显示Bean验证错误消息模型验证未显示错误消息表单验证未显示错误消息未显示laravel 5验证自定义错误消息 Codeigniter 4验证错误未显示我的验证错误消息未显示(Javascript)Laravel 5验证错误消息未显示 Angular form验证未显示错误消息相关输入的验证错误消息未正确显示自定义错误消息未正确显示使用firestore进行验证后未显示错误消息在验证之前显示自定义验证属性错误消息 Symfony 4表单验证未显示所有错误 JQuery验证未显示正确的消息错误消息未显示的原因 yii2自定义验证addError消息未显示验证错误消息未显示在窗体视图中使用角度验证时，单击提交按钮时不会显示错误消息显示用于验证的自定义消息如何显示来自角度验证器的错误？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

响应式表单建立表单由组件隐式的创建表单控件实例在组件类中进行显示的创建控件实例表单验证指令函数在表单数据发生变更时，模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新，...，从而生成错误信息列表在进行用户输入数据有效性验证时，在控件上通过添加一个模板引用变量来暴露出 ngModel，从而在模板中获取到指定控件的状态信息，之后就可以通过获取错误信息列表来进行反馈 <div...4.4、表单的自定义数据验证 4.4.1、自定义验证器在很多的情况下，原生的验证规则无法满足我们的需要，此时需要创建自定义的验证器来实现对于响应式表单，我们可以定义一个方法，对控件的数据进行校验，之后将方法作为参数添加到控件定义处即可...ngOnInit(): void { } } 在针对多个字段进行交叉验证时，在模板页面中，则需要通过获取整个表单的错误对象信息来获取到交叉验证的错误信息 <div class="form-group...对于模板驱动表单，同样是采用<em>自定义</em>指令<em>的</em>方式进行跨字段<em>的</em>交叉<em>验证</em>，与单个控件<em>的</em><em>验证</em>不同，此时需要将指令添加到 form 标签上，然后使用模板引用变量来获取<em>错误</em>信息 import { Directive

18.9K2 0

Angular 6.x 表单快速入门

比较灵活适用于复杂的场景简化了HTML模板的代码，把验证逻辑抽离到组件类中手动创建 Form Model (同步) 方便的跟踪表单控件值的变化易于动态添加表单控件易于单元测试本文主要介绍...ngModel"> {{userName.valid}} `, }) export class AppComponent { username = 'semlinker'; } 第三节 - 显示验证失败的错误信息...如何显示验证失败的错误信息？...等) 的验证状态。...label> `, }) export class AppComponent { versions = ['','1.x', '2.x', '4.

4.6K2 0

AngularDart4.0 指南- 模板语法二顶

自定义事件指令通常使用StreamController来引发自定义事件。该指令创建一个StreamController并将其stream作为属性公开。...NgFor：为列表中的每个项目重复一个模板。 NgSwitch：只显示多个可能元素中的一个。 NgIf 您可以通过向该元素应用NgIf指令（称为宿主元素）来添加或移除DOM中的元素。...警惕隐藏大型组件树; NgIf可能是更安全的选择。警惕null ngIf指令通常用于防止null。显示/隐藏是无用的。如果嵌套表达式试图访问null属性，Angular会抛出一个错误。...这里我们看到NgIf守护两个。 currentHero名称仅在有currentHero时出现。 nullHero从不显示。 <div *ngIf="currentHero !...显示器是空白的，但应用程序保持滚动没有错误。 The null hero's name is {{nullHero?.

29.9K2 0

Angular2 之结构型指令几个概念

另外一方面，重新显示这个组件会很快。组件以前的状态被保留着，并随时可以显示。组件不用重新初始化，当然，该操作付出代价比较大！...标签结构型指令，比如ngIf，使用HTML 5的template标签完成它们的“魔法”。控制Template标签内DOM添加与显示，在模板级别使用的。...中间的"hip"包在一个标签中来验证下这个效果。 Hip! Hip!...这只是它的默认行为。 自定义指令我们自顶一个类似ngIf的指令。...要么显示的包含在Template标签中，要么隐式的使用*这种语法糖去包装在Template标签中。它简化了ngIf和ngFor —— 无论是写还是读。

3K2 0

Ionic3 表单处理

：formBuilder.group中的字段就是form表单中对应的字段，Validators 用于校验，规则根据实际情况配置。...自定义检验函数对以上代码稍做修改 login.ts constructor(private navCtrl: NavController, private navParams...this.passValidator ，该函数内容如下 /** * 自定义检验函数 * @param {FormControl} control * @returns {{username...null : {password: {info: '这是自定义校验函数检查出来的错误'}}; } 为了查看测试结果，需要修改一下模板文件 login.html ...info}} 当校验不通过的时候，就会在这个div上显示在 login.ts 中定义的提示信息。以下是测试结果，仔细看 ?

1.3K1 0

angular知识点梳理第二篇-基本语法

/home.component.less'] }) export class HomeComponent implements OnInit { //声明一个list类型的变量，用于验证NgFor...{{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素的显示与消失，这里和隐藏要区别开，他的效果和css中的display:none效果是一致的，和visibility.../home.component.less'] }) export class HomeComponent implements OnInit { //声明一个boolean类型的变量，用于验证ngif...状态当前的isShow:{{isShow}} 我是一个div块运行效果 true显示：...官方的话：为没有 DOM 元素的指令安排宿主管道管道其实就是具有一定功能的函数，主要是一些场景是对字符串什么的进行简单的转化，当然我们也可以自己使用自定义的函数进行数据的转换，只是angular给我们提供了一些初始化的功能函数管道详细列表

2.5K3 0

AngularDart 4.0 高级-结构指令顶

但是如果没有一个令人信服的理由让他们保持身临其境，你应该首先去除用户看不到的DOM元素，并用像NgIf这样的结构指令来恢复未使用的资源。这些相同的考虑适用于每个结构指令，无论是内置还是定制。...这里是*ngIf英雄存在，则显示hero的名字。 {{hero.name}} 星号是“语法糖”，因为它有点复杂。...NgFor指令具有比本指南中显示的NgIf更多的功能，包括必需的和可选的。至少NgFor需要一个循环变量（let hero）和一个列表（heroes）。...满足Angular模板中的类似需求。编写一个结构指令在本节中，您将编写一个与NgIf相反的UnlessDirective结构指令。 NgIf在条件为true时显示模板内容。...关于扩展成的微语法。写一个自定义的结构指令，UnlessDirective。

16.1K2 0

AngularDart4.0 指南-体系结构概述顶

HeroDetailComponent（代码未显示）显示关于特定英雄的详情，这是用户从HeroListComponent提供的列表中选择的英雄。...在Dart中，唯一值为true的是布尔值true; 所有其他值是错误的。 JavaScript和TypeScript相反，将诸如1和大多数非空对象的值视为true。...服务通常是一个狭义的，明确的目的。它应该做一些具体的事情，并做好。例子包括：日志服务数据服务消息总线税计算器应用配置 Angular中没有特别指定服务。 Angular没有定义服务。...组件类应该是精益的。他们不从服务器获取数据，验证用户输入或直接登录到控制台。他们将这些任务委托给服务。一个组件的工作是启用用户体验，仅此而已。...但它并不包括你需要知道的一切。以下是其他重要的Angular功能和服务的简短字母顺序列表。 Forms：支持基于HTML验证和脏检查的复杂数据录入方案。

7.9K3 0

Angular 6.x 快速入门

基础知识 ngIf 指令简介该指令用于根据表达式的值，动态控制模板内容的显示与隐藏。它与 AngularJS 1.x 中的 ng-if 指令的功能是等价的。...ngIf 指令语法 ... ngFor 指令简介该指令用于基于可迭代对象中的每一项创建相应的模板。...组件，开发一个功能，即可以让用户动态控制技能信息的显示与隐藏。...get() 方法，设置请求地址并发送 HTTP 请求； (4) 把请求的结果，赋值给对应的属性。...反之，我们的路径将在 URL 地址栏中显示，随后进行后续视图更新，以匹配 routerLink 中设置的值。

14.1K2 0

【Angular教程】-内容投影u002F@ContentChildu002F@ViewChild

投影子元素使用ng-container来包裹子元素,减少不必要的dom层,类似vue中的template 容器组件这样写编号4 4....使用ng-container定义我们的投影区块使用ngTemplateOutlet指令来渲染ng-template元素。通过内置的动态指令*ngIf来控制是否渲染投影。...class ContentDirective { constructor(public templateRef: TemplateRef) {} } 我们再定义一个指令来控制组件中显示...,文笔功底有限,加油了~,下一篇打算写写自定义指令的使用。

5323 0

AngularDart4.0 英雄之旅-教程-04明细顶

Angular无法显示null selectedHero的属性并抛出以下错误，在浏览器的控制台中可见： EXCEPTION: TypeError: Cannot read property 'name...刷新浏览器，该应用程序不再失败，名称列表再次显示在浏览器中。当没有选定的英雄时，ngIf指令从DOM中移除英雄详情HTML。没有英雄细节元素或绑定担心。...在结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor的更多信息。格式化选中hero 当选择的英雄细节显示在列表下方时，很难在列表中识别选定的英雄。...在上面添加的样式元数据中，有一个名为selected的自定义CSS类。为了让选定的英雄更清晰可见，当用户点击英雄名字时，你将把这个选定的class应用到。...您将Hero类移到lib / src下的自己的文件中。你增加了选择英雄和显示英雄的细节的能力。您了解了如何在组件模板中使用核心指令ngIf和ngFor。

3K3 0

Angular快速学习笔记（3） -- 组件与模板

显示数据在 Angular 中最典型的数据显示方式，就是把 HTML 模板中的控件绑定到 Angular 组件的属性。...它是语法中不可或缺的一部分通过 NgIf 进行条件显示有时，应用需要只在特定情况下显示视图或视图的一部分,这个时候使用ngif，同vue.js里的v-if 小结带有双花括号的插值表达式 (interpolation) 来显示一个组件属性用 ngFor 显示数组用一个 TypeScript 类来为你的组件描述模型数据并显示模型的属性用 ngIf...数据绑定的威力和允许用自定义标记扩展 HTML 词汇的能力，会让你把模板 HTML 当成 HTML+。...在这种模式下，有类型的变量默认是不允许 null 或 undefined 值的，如果有未赋值的变量，或者试图把 null 或 undefined 赋值给不允许为空的变量，类型检查器就会抛出一个错误 Angular

15.2K3 0

浅谈Angular

*ngIf--控制元素的显隐性 ?:ng-show和*ngIf的区别是什么?...ng-show本质上设置元素的display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上的从DOM结构中移除结构型指令 *ngIf--控制元素的显隐性 ?...:ng-show和*ngIf的区别是什么?...来控制元素的显隐在自定义指令里获取指令添加到其上面的元素,需要依赖注入ElementRef服务如果自定义指令想要接收从外部传入的值,需要使用@Input装饰器\....-- 处理货币 currency 参数一:货币符号美元 'USD',欧元 'EUR' 参数二:布尔值,是否显示货币的符号,默认true 参数三:整数最少位数.小数最少位数-小数最多位数-->

4.4K1 0

Angular 2 + 折腾记：(7) 初步了解表单：模板驱动及数据驱动及脱坑要点

项目中的案例 html <div class="beautify-form" *ngIf="!...// v4+ , 第一位的''代表这个元素初始化构建为空值,类似未输入状态 // 'UserName': ['', Validators.compose([Validators.minLength...(6)] // Validators可选参数 // 1. required ：必须验证的，返回布尔值 // 2. minLength ：最小长度 // 3. maxLenght: 最大长度...的写法 :嵌套表单的取值必须用.get()来获取，不然会报错误，具体原因是api改动了，看下官方文档就知道，改动了挺多(不仅仅这块) <div class...有不足之处或者错误之处请留言指出，会及时跟进修正。。谢谢

3.8K2 0

AngularDart Material Design 输入顶

hintText String 要在输入上显示的提示。如果输入上有错误消息，则不会显示此文本。...requiredErrorMsg String 自定义错误消息，以显示何时需要该字段并显示空白。 rightAlign bool 输入内容是否应始终右对齐。...requiredErrorMsg String 自定义错误消息，以显示何时需要该字段并显示空白。 rows int 多行输入应该有多少行。可以是整数，也可以是字符串。...hintText String 要在输入上显示的提示。如果输入上有错误消息，则不会显示此文本。...如果没有输入文本，则必需的输入将在第一次失去焦点时显示验证错误。 requiredErrorMsg String 自定义错误消息，以显示何时需要该字段并显示空白。

5.3K4 0

ionic4 -- 修改tabs图标

由于现在ionic还处于未正式的情况，所以博主不推荐使用这套新框架做项目开发，因为其源码一直在变化，现遇到有人问tab图标在4里面如何进行操作，带着这样的问题，我们来看看如何去写。...的。...第二大部分：ion-tab-bar：这里是页面显示组件，每个button都在这里被合理放置并自适应和匹配ionic的主题。 2、查看官方文档理清楚两大部分的作用后，我们查看官方文档： ?.../assets/icon/zfb.png" *ngIf="flag=='home'" class="img-icon"/> <img src="../...../assets/icon/wx.png" *ngIf="flag!

1.5K2 0

ASP.NET MVC编程——模型

显示模型绑定使用UpdateModel和TryUpdateModel显示绑定模型，不会检验未绑定字段。...CustomValidation 自定义验证规则 DisplayName 设置字段的显示名称 Compare 比较两个字段是否一致可用于确认第二次输入是否与第一次一致 MinLength 设置数组或字符串最小长度..., MinimumLength = 6)] public string NewPassword { get; set; } 4扩展 自定义注解创建自定义特性，继承自ValidationAttribute...HTTP请求的请求URL，消息头，消息体。...当操作带有参数时，MVC框架使用模型绑定器（默认的或自定义的）在Http请求中查找数据，用于构建控制器操作的参数列表。验证发生的时间模型验证是在操作执行之前完成的。

2.4K8 0

Angular17 使用 ngx-formly 动态表单

Validation 表单验证主要包括：Formly 内置验证、自定义验证消息及自定义验证函数三大块，自定义验证消息和验证函数分别还可以正在全局注册和指定字段注册，在不同的场景可以考虑不同的自定义方式...-\u9fa5]+$/, }, } 为字段添加自定义验证消息：到目前不通过验证的字段仅仅是通过边框颜色的改变的区分，现在就为字段添加自定义的验证消息，自定义验证消息同时支持字符串和函数两种方式设置...同级添加自定义验证函数，同时还要通过 options.errorPath 设置显示验证消息的字段： { validators: { validation: [ {...model.password', }, } PS：hide 是框架显示提供的属性，props.disabled 是继承自组件的属性；强制显示错误状态：使用 formState 可以实现字段之间的通信...，所以让 formState & expressions.validation.show 共同控制错误状态的显示；首先需要定义一个选项并绑定到 formly-form 组件： signInOptions

5671 0

AngularDart 4.0 高级-生命周期钩子顶

显示如何解释更改对象。 DoCheck 使用自定义更改检测实现ngDoCheck方法。看看Angular多久会调用这个钩子，并在更改日志后观察它。...这个偷偷摸摸的间谍指令很简单，几乎完全由ngOnInit和ngOnDestroy钩子组成，这些钩子通过注入的LoggerService将消息记录到父级。...hero属性的值是对hero对象的引用。 Angular并不在意英雄自己的name属性发生了变化。英雄对象引用没有改变，所以从Angular的角度来看，没有改变的反馈！...当英雄或权力没有实质性变化时，它会向日志中写入特殊消息，以便您可以看到DoCheck被多次调用。结果是高亮的： ?...Angular的单向数据流规则禁止在视图组成之后更新视图。组件视图组合完成后，这两个钩子都会触发。如果钩子立即更新组件的数据绑定comment属性，Angular会抛出一个错误（尝试它！）。

6.2K1 0

angular 模板常用语法

结构指令 1.1 条件 extport class AppComponent { flag = true; } xxxx <p *ngIf="flag else...对象属性绑定(DOM Property) HTML属性绑定(HTML Attribute) 错误写法...使用表单模块，导入import {FormsModule} from ‘@angular/forms’; 自定义组件属性...(msg);" /> 按x,xChange的规范定义属性及事件 @Input() msg = 'msg'; @Output() msgChange = new EventEmitter 截取(字符串/数组) {{i}} {{str | slice:0:4}

1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭