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

Angular 7& Angular Material -验证器未显示MinLength错误

Angular 7是一种流行的前端开发框架,它基于TypeScript构建,并由Google维护。Angular Material是一个UI组件库,提供了丰富的可重用组件,用于创建现代化的用户界面。

在Angular中,验证器用于验证表单输入的有效性。当验证失败时,可以显示错误消息。对于MinLength验证器未显示错误消息的问题,可能是由于以下原因:

  1. 验证器未正确应用:请确保在表单控件上正确应用了MinLength验证器。例如,如果要验证一个输入字段的最小长度为5个字符,可以在模板中的相应输入字段上添加[minlength]="5"属性。
  2. 错误消息未正确显示:验证器会在表单控件的错误对象中添加一个名为minlength的属性,以指示验证失败。您可以通过在模板中使用*ngIf指令来检查该属性,并显示相应的错误消息。例如:
代码语言:txt
复制
<div *ngIf="formControlName.errors?.minlength">
  最小长度为5个字符。
</div>
  1. Angular Material的集成:如果您正在使用Angular Material的表单控件,例如mat-input,则需要使用mat-error组件来显示错误消息。例如:
代码语言:txt
复制
<mat-form-field>
  <input matInput [formControlName]="fieldName" minlength="5">
  <mat-error *ngIf="formControlName.hasError('minlength')">
    最小长度为5个字符。
  </mat-error>
</mat-form-field>

推荐的腾讯云相关产品:腾讯云提供了一系列云计算产品,适用于各种应用场景。对于前端开发和云原生应用,推荐使用腾讯云的云服务器(CVM)和云原生应用引擎(TKE)。您可以通过以下链接了解更多信息:

请注意,以上答案仅供参考,具体实现可能因项目需求和环境而异。

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

相关·内容

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

响应式表单 建立表单 由组件隐式的创建表单控件实例 在组件类中进行显示的创建控件实例 表单验证 指令 函数 在表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新,...4.2.3、数据的有效性验证 某些时候需要对于用户输入的信息做有效性验证,此时可以在控件上添加上原生的 HTML 表单验证来设定验证条件,当表单控件的数据发生变化时,angular 会通过指令的方式对数据进行验证...from '@angular/forms'; // 引入 Validators 验证 import { Validators } from '@angular/forms'; /** * 自定义验证方法...g directive direactives/hero-validate 在创建完成指令之后,我们需要将这个指令将该验证添加到已经存在的验证集合中,同时为了使这个指令可以与 angular 表单集成在一起...ngOnInit(): void { } } 在针对多个字段进行交叉验证时,在模板页面中,则需要通过获取整个表单的错误对象信息来获取到交叉验证错误信息 <div class="form-group

18.9K20

Angular17 使用 ngx-formly 动态表单

同级添加自定义验证函数,同时还要通过 options.errorPath 设置显示验证消息的字段: { validators: { validation: [ {...name: 'fieldMatch', // 设置后 checkPassword 字段才会在触发验证显示验证消息 options: { errorPath: 'checkPassword...model.password', }, } PS:hide 是框架显示提供的属性,props.disabled 是继承自组件的属性; 强制显示错误状态: 使用 formState 可以实现字段之间的通信...,所以让 formState & expressions.validation.show 共同控制错误状态的显示; 首先需要定义一个选项并绑定到 formly-form 组件: signInOptions...[options]="signInOptions" > 接着将 formState 绑定到 expressions,最后通过 changeValidation 函数强制显示错误状态

32610

angularjs学习第四天笔记(第一篇:简单的表单验证

第四天,简单的表单验证,今天主要学习了angularjs中的表单验证的一些基本概念及其简单应用  第一、表单验证的简单理解     表单验证是angularjs中比较重要的一个核心功能     表单验证可以结合...html5的验证特殊使用,当然也可以禁用浏览对表单的默认验证,添加属性【novalidate】即可     表单验证毕竟只是前端js验证,在后端代码中一定需要对其数据的合法性做再次验证     angularjs...:ng-minlength,使用ng-minlength=“最小长度值”     3.最大长度:ng-maxlength,使用ng-maxlength=“最大长度值”     4.模式匹配:ng-pattern...      合法的表单:属性关键词【valid】,bool类型,只有当表单内容合法才为true       不合法表单:属性关键词【invalid】,bool类型,只要有不合法的都为true       错误...,才显示显示错误信息 <!

1.3K20

angularjs学习第四天笔记(第一篇:简单的表单验证

第四天,简单的表单验证,今天主要学习了angularjs中的表单验证的一些基本概念及其简单应用  第一、表单验证的简单理解     表单验证是angularjs中比较重要的一个核心功能     表单验证可以结合...html5的验证特殊使用,当然也可以禁用浏览对表单的默认验证,添加属性【novalidate】即可     表单验证毕竟只是前端js验证,在后端代码中一定需要对其数据的合法性做再次验证     angularjs...:ng-minlength,使用ng-minlength=“最小长度值”     3.最大长度:ng-maxlength,使用ng-maxlength=“最大长度值”     4.模式匹配:ng-pattern...      合法的表单:属性关键词【valid】,bool类型,只有当表单内容合法才为true       不合法表单:属性关键词【invalid】,bool类型,只要有不合法的都为true       错误...,才显示显示错误信息 <!

1.6K10

angularjs学习第五天笔记(第二篇:表单验证升级篇)

第五天,昨天学习了简单的表单验证,在昨天的基础上,今天主要对表单验证进一步学习研究。   ...今天主要学习一下几点:文本框失去焦点后验证、表单验证提示信息显示处理优化 第一、文本框失去焦点后验证     文本框失去焦点验证效果:文本框失去焦点后对其合法性验证     文本框失去焦点验证实现方式...:定义一个指令(指令后续专门研究)当文本框失去焦点是设置focused=true,获得焦点为false                   提示显示信息添加并列显示条件(focused)     举一个具体的练习实例...= false; }) }) } } })   第二、表单验证提示信息显示处理优化...上面的表单验证的提示信息在体验上不是很友好,同一个文本框有可能同时显示多个提示信息     新版本的angularjs中,引入了ngMessages指令,用于更加友好的处理方式  ngmessages

1.5K30

angularjs学习第五天笔记(第二篇:表单验证升级篇)

第五天,昨天学习了简单的表单验证,在昨天的基础上,今天主要对表单验证进一步学习研究。   ...今天主要学习一下几点:文本框失去焦点后验证、表单验证提示信息显示处理优化 第一、文本框失去焦点后验证     文本框失去焦点验证效果:文本框失去焦点后对其合法性验证     文本框失去焦点验证实现方式...:定义一个指令(指令后续专门研究)当文本框失去焦点是设置focused=true,获得焦点为false                   提示显示信息添加并列显示条件(focused)     举一个具体的练习实例...= false; }) }) } } })   第二、表单验证提示信息显示处理优化...上面的表单验证的提示信息在体验上不是很友好,同一个文本框有可能同时显示多个提示信息     新版本的angularjs中,引入了ngMessages指令,用于更加友好的处理方式  ngmessages

1.6K10

AngularDart Material Design 输入 顶

请改用angular2 forms API disabled bool  是否禁用此输入(只读输入) displayBottomPanel bool  是否显示错误,提示文本和字符计数面板...请改用angular2 forms API disabled bool  是否禁用此输入(只读输入) displayBottomPanel bool  是否显示错误,提示文本和字符计数面板...如果没有输入文本,则必需的输入将在第一次失去焦点时显示验证错误。 requiredErrorMsg String  自定义错误消息,以显示何时需要该字段并显示空白。...displayBottomPanel bool  是否显示错误,提示文本和字符计数面板。...如果没有输入文本,则必需的输入将在第一次失去焦点时显示验证错误。 requiredErrorMsg String  自定义错误消息,以显示何时需要该字段并显示空白。

5.2K40

Angular 6正式版发布,都有哪些新功能

ng update不会取代你的软件包管理,而是在后台使用 npm 或 yarn 来管理依赖包,除了更新和监视依赖包外,ng update还会在必要的时候对你的项目进行改造。...ng add使用软件包管理来下载新的依赖包并调用安装脚本,它可以通过更改配置和添加额外的依赖包(如 polyfills)来更新你的应用。...Angular Material + CDK 组件 最值得一提的是用于显示分层数据的树形控件,遵循数据表组件的模式,CDK 包含树的核心指令,而 Angular Material 则提供与顶层的 Material...Angular还更新了徽章(badge)和底部菜单栏的组件,徽章用于显示小而有用的信息,例如未读信息的数量。...每个主版本的支持时间是18个月,其中,前6个月是积极开发阶段,接下的 12 个月是错误修正和安全补丁阶段。

4.2K20

Angular 10 正式发布,不再支持 IE910!

这是跨越整个平台(包括框架、Angular Material 和 CLI)的一次主要版本更新。这次的新版发布间隔比以往短一些。自我们发布 Angular 9.0 版以来只过去了四个月。...新版内容 新的日期范围选择 Angular Material 现在提供了一个新的日期范围选择。 ?...file=src%2Fapp%2Fdate-range-picker-overview-example.html 更多细节请查阅 date range selection: https://next.material.angular.io...ng new --strict 启用此标志会使用一些新设置初始化你的新项目,这些设置可以提高可维护性,帮助你提前捕获错误并允许 CLI 在你的应用上执行一些高级优化措施。...在过去的三周中,我们在框架、工具和组件中的解决问题数量减少了 700 多个。我们已解决了 2,000 多个问题,并计划在接下来的几个月中投入大量资源,与社区合作做更多事情。

2.5K20

AngularJS的digest循环和$apply

分析原因:第一感觉是前端页面绑定指令不对,导致不能正常显示,然而变化各种指令都不能正常获取,很是郁闷;最后去掉Ajax,直接返回给页面,结果却是可以的,初步排除了与绑定指令相关。...当使用angular时,其会扩展这个标准的浏览流程,创建一个angular上下文(angular事件循环内的特定代码,该angular事件循环通常被称为$digest循环)。...指令、控制调用$evalAsync(),会在angular操作DOM之后,浏览渲染之前运行。所以,永远不要使用其来约定事件的顺序。...三、页面中的$digest循环 (1)angular会设置一个隐式的监控,将输入字段的值绑定为当前的...循环之前,会触发该值(ng-model)上运行的验证和格式化操作; (5)由于在digest循环中值发生了变化,angular需要再次运行这一循环以确定它没有改变作用域对象上的其他值。

3.1K41

移除 View Engine 转用 Ivy,盘点Angular 12的重要更新

Angular CDK 与 Angular Material 共同开放新的 Sass API 接口,可供您通过新的 @use 语法进行使用。...默认情况下,CLI 将启用严格模式以捕捉开发早期的各种错误。 Webpack 5 模块捆绑现已实现生产就绪。 不再支持 IE11 浏览。 对于编译,新版本提供转换组件样式资源的支持能力。...为了提高性能,新版本删除了 DomAdapter 中的多种使用方法。 新版本向 localize-extract 中添加一种新的格式,名为 legacy-migrate。...在表单中,引入最小与最大值验证。 新版本可导出 HTTP 状态码列表。 向 Angular 语言服务添加一项功能,允许用户直接访问使用模板文件的组件的实际位置。...新版本还对大量 bug 做出修复,进一步完善了编译、compiler-cli、Bazel 构建工具、路由以及 Angular 内其他组件的运行质量。

4.4K10
领券