角度验证: Mat-Error在更正输入后不会消失
Mat-Error是Angular Material中的一个组件，用于在表单输入验证时显示错误信息。它主要用于在用户输入错误时，提供可视化的反馈，以帮助用户更正输入。
Mat-Error有以下特点和优势：
- 可定制化：可以根据需要自定义错误消息的显示方式，包括文字提示、图标、颜色等，以便更好地适应应用的样式和需求。
- 实时验证：Mat-Error能够实时监测输入的变化，并根据设定的验证规则判断输入是否合法。这样可以及时显示错误信息，引导用户修正错误。
- 可访问性：Mat-Error支持无障碍访问，提供了适当的ARIA属性和焦点管理，以确保屏幕阅读器用户和键盘导航用户能够正常使用。
Mat-Error在各种应用场景中都能发挥作用，特别是在表单验证中最为常见。以下是一些常见的应用场景：
- 用户注册和登录表单：当用户填写了无效的用户名、密码或其他必填字段时，Mat-Error可以提示用户错误信息，帮助他们更正输入。
- 数据提交表单：在表单提交之前，使用Mat-Error对用户输入进行验证，确保数据的完整性和正确性。
- 数据编辑和更新表单：在用户修改数据时，使用Mat-Error对用户输入进行验证，及时发现并提示错误。
在腾讯云中，可以使用腾讯云的Serverless云函数（SCF）结合前端框架（如Vue、React等）来实现Mat-Error的功能。SCF是一种事件驱动、无服务器的计算服务，可以帮助开发者在云端运行代码，实现快速的前端和后端交互。您可以使用SCF来编写验证逻辑，并在前端调用该函数进行验证，并根据验证结果显示Mat-Error。
腾讯云的SCF产品介绍和文档链接地址：https://cloud.tencent.com/product/scf
希望这些信息对你有所帮助！
相关·内容
1回答
我实现了一个日期选择器，只要日期无效，它就会显示一个mat-error。问题是，当日期被更正时，错误不会消失，除非用户单击日历，然后选择正确的日期。color="primary" matDatepickerApply>Apply</button> </mat-datepicker>
<mat-errorclass="om-error
浏览 20提问于2021-10-28得票数 0
</mat-error> </mat-form-field> 如果用户在password字段中输入一个值，而在vpassword字段中输入一个不同的值，则可以按需执行此操作。如果用户更正<
浏览 28提问于2021-07-25得票数 2
回答已采纳
1回答
提交后角度材料重置表单
、、、
我使用angular材料，我有一个带有响应式验证的表单。 我想在提交后重置我的表单，我的问题是在提交后我看到我的错误出现在表单中。输入示例： <mat-form-field> <input matInput name="prenom" formControlName="prenom">
<mat-error *ng
浏览 14提问于2020-03-29得票数 0
回答已采纳
1回答
我有一个问题，我不能在angular中使用反应式表单进行异步验证。我可以在写输入时保持查询活动，它会给我带来结果，但我不能在html中发送错误。:检查每次我在输入中写入时，服务器会以以下方式响应我，当名称存在于BD中时，它会将该名称的数据带给我一个json数组，但这是一个空数组，这就是为什么data.length。但输入会写入任何内容，并且它被放置为红色，而不显示特定的错误(用于验证材质角度)，并且它不会显示是否存在或名称不可用的错误
浏览 9提问于2019-09-17得票数 1
我在html中重复了angular material的输入域，因此我使用<mat-error>来显示错误消息。我实际上在我的代码中使用了模板驱动的表单，看看我到目前为止创建的带有输入域的表单：<div *ngFor="let distanceVal of distanceArray;let i=indexdiv>
我实际上正在尝试验证输入字段，以便如果它在任何其他输入字段
浏览 0提问于2018-03-31得票数 2
1回答
在我的角度6项目中，我使用了角质材料的垫子误差来表示错误： <mat-form-field class=matInput placeholder="Id" <mat-erro
浏览 0提问于2018-10-10得票数 2
回答已采纳
我想根据空值和无效的日期格式验证角度材料日期拾取器输入，但有两个单独的错误消息，一个在空值的情况下，另一个在无效输入的情况下。mat-datepicker- <mat-datepicker touchUi #picker></mat-datepicker> <mat-error *ngIf
浏览 37提问于2019-10-18得票数 0
2回答
我无法验证材料输入的最小数量，即使我可以成功验证required。portfolioValue | currency: 'GBP': 'symbol'}}</strong>
<mat-error *ngIf="
浏览 3提问于2018-08-16得票数 1
工作角度材料，mat-form-field和反应形式。在一个项目中，我有一个反复出现的模式，如下所示this.formGroup = this.formBuilder.group({ </mat-form-field>这是一个很高的级别--接受我可以从服务器接收验证错误--我如何在组件中重复这个http模板模式？>error message fo
浏览 1提问于2019-01-21得票数 0
2回答
我正在使用角度形式来创建一个寄存器形式。我已经做了一个自定义验证器，它检查密码是否与确认密码字段相同。虽然“密码不匹配”的错误没有显示，但在输入所有字段之前，输入仍然是红色的。具有自定义验证器方法checkPasswords的表单生成器 firstName: ['', Validators.required>Password is not valid</mat-e
浏览 2提问于2019-10-17得票数 0
回答已采纳
我有一个角材料10.2登录组件，它在验证失败时通过<mat-error>显示一个错误，类似于。当用户移动到修改登录表单中的电子邮件或密码字段时，错误状态应该是removed...but --我无法找到一种不删除当前字段值的方法，即用户应该能够移动一个或多个字段，进行更正并重新提交。任何想法，如何清除角物质<mat-error>状态，而不清除任何其他在签署形式？">
<input matInput placeholder="Email"
浏览 3提问于2020-11-05得票数 2
回答已采纳
我有一个反应形式，在我的角度应用程序，是用来接收来自用户的IP地址范围。我正在使用一种反应形式，使用户能够进入和删除IP范围在他们自己的闲暇。表单本身使用一个FormBuilder来创建一个FormArray，其中包含两个作为文本输入的表单控件。创建表单和每个表单数组元素的所有代码都比较简单。但是，似乎与在我的表单中显示验证错误有关。特别是线路 <p>IP
浏览 0提问于2019-07-17得票数 0
回答已采纳
1回答
当DatePicker结束日期输入小于开始日期输入时，我无法正确地实现mat错误样式的更改。该按钮能够通过禁用自身来识别输入无效，但是在'end_date‘上不会发生错误样式的更改。代码： End date must be greater</mat-err
浏览 2提问于2021-08-26得票数 1
回答已采纳
1回答
我有这个基本的密码确认表格使用角度和材料。当以下情况下，输入应该显示错误：问题是confirm_password输入没有检测到错误在不使用自定义验证器的情况下，当confirm_password输入与第一个输入不相等时，是否有任何方法使其显示错误？
浏览 1提问于2021-05-05得票数 0
6回答
我用的是最新的角度和最新的角度材料。我有一个数据报警器，我想添加一些验证。文档说，required属性应该是开箱即用的，但它似乎不像其他表单元素那样处理错误。但是，验证的工作方式并不像我所期望的那样；在这种情况下，如果我单击字段，然后在没有输入日期的情况下走出字段，那么输入就会变成红色样式，但是通常的[controlName].errors对象不会被填充。这意味着以通常的方式显示错误消息(与同一页上不是日期选择器的其他输入一起工作的方
浏览 4提问于2018-01-16得票数 14
回答已采纳
4回答
*ngIf="service.form.get('email').hasError('maxlength')">{{ 'Display.messageLength' }}</mat-error><mat-error *ngIf="service.form.get('email').hasError('required')">{{ 'Display.requiredMess
浏览 8提问于2020-02-24得票数 1
2回答
我想使用mat错误渲染服务器端错误在我的角度5 SPA.输入字段和许多垫子错误标签下面。在单个输入字段中附加了大量的重复代码。另外，添加一个新的错误消息会导致在每个需要它的字段中添加它。组件模板中，有我们以前在每个字段中都有的所有mat-error代码。field.hasError('other')">Some other error</mat-error>使
浏览 1提问于2018-05-22得票数 8
回答已采纳
我在角11中使用了反应性表单和自定义验证器。当用户选择一个早于EndDate的StartDate时，我希望在表单级别上标记一个错误。我将使用此表单级错误在模板上显示错误文本，并禁用按钮以提交表单。** }, DateValidators.compareDa
浏览 11提问于2021-03-30得票数 1
回答已采纳
问题是，即使我将字段留空并移动到另一个字段，错误消息也不会显示。我找不到我在这里做错了什么。任何帮助都将不胜感激。如果我将断点放在onFormValuesChanged()上，它永远不会命中断点。我已经尝试在构造函数中移动form的构建部分，但没有任何影响。我不确定表单的值更改事件是否在字段值更改时触发 角度版本：- 5.2.1 HTML代码 <div>
<form [formGroup]="formPersonalRecord"><
浏览 65提问于2018-01-25得票数 8
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
