问题标签 [angular2-form-validation]

Inside my angular app I generated a component that serves as a custom FormControl and it implements ControlValueAccessor and Validator.

That component is used inside a FormGroup and it has a validator attached to it (like its value must have at least 10 chars or w/e). When theres a value change inside the actual input inside my custom FormControl the validate method triggers. Inside this method I can access the FormControl but it has a "pre-change-state" i.e. if the user typed in something wrong (according to the bound validator) it gives me its last value/error/state...

To get to the updated state I'm using a hacky

How can I get the updated state inside validate without setTimeout? Or is there something like an afterUpdate hook I am not aware of?

Here's my stackblitz: https://stackblitz.com/edit/angular-8-material-starter-template-tubfwx?file=src%2Fapp%2Fcustom-form-control%2Fcustom-form-control.component.ts

我正在使用 FormArray 构建一个反应式表单，其中包含 FormGroups 。每个 FormGroup 有 3 个控件，其中两个是下拉菜单。我想防止用户在其中一个下拉菜单中多次选择相同的选项。我编写了一个自定义验证器来实现这一点。验证器似乎有效，因为我在 if 子句中输入了 return { 'subCategoryRepetition': true }，但表单保持有效，控件的错误数组为空。

提前感谢您的帮助！

这是代码：

组件.ts

custom.validator.ts

我正在验证动态创建的表单字段。我基本上有三个验证：

在我的 HTML 中：

我也尝试过简单的：

在我的打字稿中，我有两种方法：

limitUser 限制用户输入任何高于 10 或低于 0 的值，因为它会按预期自动将其更改为 10 或 0。isNumberOnly 确保用户只输入数字

我有角形。

当我打开应用程序时，控制台在in fooValidation没有我的情况下记录了四次。

为什么？这是设计的吗？如何使其仅在提交表单后或关注指定字段时执行？

堆栈闪电战示例

我正在尝试使用模板驱动的表单验证来实现一个新的 Angular 组件。我一直在关注这里的文档，但似乎无法复制结果。具体来说，当输入无效时，显示错误的 div 不会出现。

这是上下文的源代码：

模板：

相关组件代码：

我的理解是，该行#value="ngModel"创建了一个局部变量value，其中包含声明它的输入元素的值，然后允许我value在以下 *ngIf 指令中引用以检查错误。

但是，当输入值超出范围（小于 0，大于 1）时，mat-error 元素永远不会出现，所以我的理解可能是错误的和/或我错误地实现了这一点。

任何解释将不胜感激！

我开始使用 Angular Reactive Forms。

我真的很喜欢能够拥有异步验证器的想法（对于必须检查数据库的东西），并且我喜欢 GUI 不需要知道每条规则的想法。

所以我有一个虚拟登录表单：

和匹配的视图：

目前，我没有直观的线索为什么用户无法提交表单。以前我在做一些 ASP.Net Core 项目，并且有相同的方法在 ViewModel/Controller 端声明模型及其验证规则。

1. 我有点期待，因为 ion-input 知道它的表单控件名称，如果验证失败，至少可以自动添加某种红色边框。正常吗？我错过了什么？
2. 有没有办法从.ts文件中提供错误消息？我的意思是，ViewModel 和 View 必须知道每个错误（及其参数（如 minlength））有点奇怪，如果有错误，验证器是否有责任提供错误？
3. 如果我有一些全局错误怎么办（例如，用户名-密码的组合无效，我可以使用表单来提供此信息，还是应该在其他地方进行管理？

很抱歉将 3 个问题合二为一，但它是相同的示例并且非常接近。

我有一个带有验证的反应式表单，我试图弄清楚如何向项目列表添加额外的检查。前任。除了其他必填字段外，我还希望至少检查一项是否有效。

以下是正在显示的表单中的项目。您可以看到它只是一个名为“practicingStyles”的数组中的项目列表，它们被显示为按钮

前任。

我在 .ts 中的表单看起来像这样，我想如果我只是添加了另一个字段 'practicedStyles' 并添加了一个检查 '[null, this.selectedPracticingStyles.length > 0]' 那么这将验证它，但它不起作用.

任何帮助，将不胜感激。

我创建了一个动态表单，您可以在其中使用专用按钮添加或删除字段：

问题是当我们添加一个新字段时，会立即触发表单验证，从而导致显示错误消息：

我只想在用户在出现错误时尝试提交表单时触发它。当然如果有错误也不能提交表单（Validators.required,nicknameValidator()）

以下是在表单中生成新行的代码：

以及负责显示这些行的 html 代码：

我写了一个自定义表单验证器，但errors它只是有"_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": false, "source": {"_isScalar": false}, "operator": {}}, "operator": {"total": 1}并且表单永远不会有效。

这是我的验证器：

这就是我使用它的方式：

通过调试，我发现我检查 example.de 的地图块从未到达，我不明白为什么。在显示内部返回之前使用并输出函数本身。

我在网上的多个示例中看到了这种结构，但它似乎对我不起作用。

我在用@angular/forms 10.0.14

我不清楚我应该在何时何地调用updateValueAndValidity。

假设我有一个带有许多 formControls 的 formGroup。现在，基于一些单选选项选择，触发一个事件来修改多个 formControls 的“验证器”。

Q1：我是在修改后立即调用 updateValueAndValidity 还是在所有修改调用完成后调用？

Q2：我是否要通过表单更新 formGroup / formControls 以更新所有 formControls

或单独调用每个 formControls