问题标签 [angular2-form-validation]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
4118 浏览

angular - Angular reactive form validation with dynamically named controls

In my Angular 7 app using reactive forms I'm creating input elements based on an *ngFor loop, so I end up with an input dynamically named:

which of course works fine, but now I'm trying to add the validation error messages to the form, but I'm not sure how to "address" the item. For example, the div would normally look like so:

but I don't have name there as it's the dynamic work.abbrev value. What's the right way to handle this?

You can see my attempt here: https://stackblitz.com/edit/angular-8zevc1

0 投票
3 回答
14298 浏览

angular - Angular ng选择所需选项

我不知道如何在 ng-select 中使用所需的选项。

我试过这个:

但那里没有运气..

0 投票
1 回答
40 浏览

angular - 我们如何在 Angular 中一个接一个地显示表单错误验证

我是 Angular 的新手,我创建了一个自定义 EmailDomainError 验证器类并且它工作正常。

但问题是电子邮件域错误与电子邮件验证错误消息一起显示我该如何解决这个问题我真的很困惑有人可以帮助我吗

我想我必须在我的 EmailDomainError 类中检查电子邮件模式是否正确,我该如何检查?如果我认为正确的方法和我的完整代码--- https://stackblitz.com/edit/angular-bvihqj

ngOnInit

此对象包含此表单的所有验证消息

电子邮件域错误

在此处输入图像描述

0 投票
1 回答
347 浏览

angular - 在使用 ngNativeValidate 提交表单之前调用验证函数

您好我正在尝试在单击按钮时调用 validate(ngNativeValidate) 函数。

我的表格看起来像:

SUBMIT按钮的验证按预期工作。TEST CONNECTION即使对于按钮,我也想要相同的行为。但不想提交表单。我该怎么做?我认为会有一些方法来调用验证器函数点击事件。任何帮助表示赞赏。谢谢!提前。

编辑:testEndpoint是一个后端调用函数。

0 投票
3 回答
9803 浏览

angular - 选择具有未定义默认值且必需属性的选项不起作用但值为空

我有一个国家的下拉列表

为了“选择国家”选项,需要设置 [value]="undefined" 否则它不会显示为默认选择,而是显示为空选择。

即使标记的字段是必填字段,但在表单提交时不会显示为

这是 html 5 中的默认行为:

在此处输入图像描述

作为处理表单提交验证的一种解决方法,但这次首先验证必填字段,最后验证国家/地区字段。

[value]="undefined" 字段的解决方案是什么并显示“请先选择一个项目”警报?

见丹尼尔的分叉小提琴

0 投票
1 回答
1022 浏览

angular - 如何从可观察对象动态创建 FromGroup?

我正在创建这个页面,该页面假设包含多个响应式来源(例如,对于每个国家/地区)。这些表单应该基于我从后端获得的 json 数组创建,以便用户可以查看当前设置是什么并单独更新。因为我不知道我将获得多少这些数据集,所以我为我获得的每个数据集创建了一个主表单和一个 FormArray。但是,如果我在表单验证器将其中一个字段标记为无效时使用 FormArray,则整个表单将被标记为无效(所有 FormArray 嵌套表单)。

我还尝试为可观察对象中的每个数据集创建不同的表单,但它给了我以下错误

所以这是我的 TS

我的html

所以我的问题是如何从可观察对象动态创建 FromGroup,或者如何使验证器仅标记一个 FormArray 的错误?

==================================================== =============================@AJT_82 我试过了,但是即使加载了表格也没有显示。

所以我把它改成了

它给了我同样的错误

0 投票
1 回答
1160 浏览

angular - 如何在 html Angular 表单中执行条件验证

我有一个表单,只有当值不等于 0 时,我才想实现 MAXLENGTH 验证。

那么如果parameter.valueMaxlength === 0 { then dont execute maxlength validation } 有没有办法把这个逻辑写在html文件中。

0 投票
1 回答
408 浏览

angularjs - Angular 混合应用程序表单验证

我将 AngularJS 应用程序升级到 Angular5。

我将一些组件从 AngularJS 迁移到 Angular5,但不是应用程序的所有其他窗口使用 ng-form 进行表单验证。

我可以毫无问题地捕获“form.account.$modelValue”,但是如果我使用自定义验证来设置帐户状态,我永远不会在 form.account.$valid 或 form.$valid 上收到错误。

例子:

0 投票
1 回答
1077 浏览

angular - 如何修复:Angular 7(SmartAdmin 模板)表单验证在导航后停止工作

我正在尝试对使用智能管理模板(来自 wrapbootstrap 的主题)的 Angular 7 应用程序执行表单验证。

我的问题是它在第一次刷新浏览器时按预期工作,甚至当我导航到不包含其他表单的组件时。当我导航到一个组件时,问题就出现了,该组件还包括一个带有自己的验证选项的表单。

此外,表单的实际“有效性”状态仍按预期工作。它只是没有在表单上显示引导类和消息。

我尝试过重置表单,重置任何异步/非异步验证器以及我能想到的任何其他东西。

最后,在组件之间的导航过程中没有错误或任何东西。

这是我处理导航的主要模块(main.routing.ts):

这是一个表单示例(create-team.component.html):

以及包含验证选项的 .ts 文件:

编辑:为了提供更多见解,这里是 SmartAdmin 模板正在使用的自定义验证:

编辑2:我设法找到了解决这个问题的方法,即使我有点不喜欢它。似乎在调用自定义 UI Validation 时,组件尚未呈现(我猜它与异步运行有关)。解决方案是在验证组件中添加 0ms 的“setTimeout”,如下所示:

如果有人能想到更好的解决方案,将不胜感激:)

期待听到您的想法。

0 投票
4 回答
1950 浏览

angular - Angular 7 + Angular Material => 在离开焦点之前不会出现表单验证错误

mat-error 部分仅在离开输入字段的焦点后显示。接受按钮被禁用。任何信息如何解决此行为以在用户键入时获取错误消息?

我也试过删除(email.dirty || email.touched),但它不起作用:/

我的自定义验证器: