从Angular 2+ FormArray获取所有验证错误
Angular 2+中的FormArray是一个表单控件，用于处理动态生成的表单数组。它允许我们在表单中添加、删除和验证多个表单控件。
要从FormArray中获取所有验证错误，可以按照以下步骤进行操作：
- 首先，确保你已经导入了必要的Angular模块和类。在组件文件的顶部添加以下导入语句：
import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms';- 在组件类中创建一个表单组，并在其中定义FormArray。例如：
myForm: FormGroup;
constructor() {
this.myForm = new FormGroup({
myArray: new FormArray([
new FormControl('', Validators.required),
new FormControl('', Validators.minLength(5)),
// 添加更多的表单控件
])
});
}- 在模板中，使用ngFor指令遍历FormArray中的每个表单控件，并显示验证错误信息。例如：
<div formArrayName="myArray">
<div *ngFor="let control of myForm.get('myArray').controls; let i = index">
<input [formControlName]="i" type="text">
<div *ngIf="control.invalid && (control.dirty || control.touched)">
<div *ngIf="control.errors.required">
必填字段
</div>
<div *ngIf="control.errors.minLength">
最小长度为5个字符
</div>
<!-- 添加更多的验证错误信息 -->
</div>
</div>
</div>在上述代码中，我们使用myForm.get('myArray').controls来获取FormArray中的每个表单控件。然后，我们使用ngIf指令来检查控件是否无效并且已经被修改或触摸过。如果满足条件，我们显示相应的验证错误信息。
这是一个基本的示例，你可以根据具体需求进行修改和扩展。如果你想了解更多关于Angular表单验证的信息，可以参考腾讯云的相关产品文档：
请注意，以上答案中没有提及任何特定的云计算品牌商，如有需要，请参考相关文档进行进一步了解。
相关·内容
SharedModule.readableError(key, server_errors[key][0], ''); }
}
如何从this.form获取所有验证错误(包括FormArray和FormGroup)？
浏览 7提问于2018-02-26得票数 0
在这段Angular 2+代码中，我有一个包含需要验证的字段的FormArray。FormArray是一个视频列表，每个视频都有一个描述和一个值。value字段是必填字段。问题是我得到了一个错误的Cannot find control with path: 'videos -> 0 -> '。我查看了其他答案，调整了代码，但错误仍然存在。有什么办法解决这个问题吗？Descrip 1', val: 'Val 1'
浏览 0提问于2018-08-10得票数 0
回答已采纳
我正在实现一个验证器，以检查哪些行具有相同的名称。
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray, ValidatorFn} from
浏览 8提问于2021-06-11得票数 4
回答已采纳
使用下面的验证器方法，我得到了下面的Typescript错误。我觉得，我已经尝试了所有的方法，我已经没有想法了。谁能告诉我怎么解决这个问题？ 验证器方法不让项目编译，因此问题与该方法的使用无关。Type '(formArray: FormArray) => { required: boolean; } | null' is not assignable to type 'ValidatorFn: FormArray) => {
浏览 24提问于2020-08-05得票数 0
回答已采纳
1回答
我在Angular 8中有这段代码，它向我显示了一个输入列表，比如附加的图像。我遇到的问题是，当我点击“完成”按钮时，我必须验证电子邮件的语法，如果这是无效的，还必须更改输入的颜色：如果只有一个字段，我会使用formGroup来验证，但我不知道如何验证电子邮件字段列表
浏览 2提问于2021-07-20得票数 0
我使用的是angular2，在我的表单中，我通常创建一个模型类并将我的对象绑定到表单中，然后通过this.myObject进行访问。
浏览 7提问于2016-08-09得票数 2
如何在angular7中获取已经应用于fromgroup、formcontrol或formarray的验证器列表？我找到setValidators(-)，但没有getValidators(-)..
浏览 1提问于2019-11-05得票数 0
app.component.tsimport {FormControl,FormGroup,FormArray,FormBuilder} from '@angular/forms'
selector: 'my-app',
templateUrl: '.topics:new FormArray([])
浏览 1提问于2018-05-05得票数 1
我试图在角11中实现一个验证器，但是我得到了遵从错误：Type '(controlArray: FormArray) => ValidationErrors | null' is not assignable，有什么想法，如何修复这个错误？Validator-class:
export class BookV
浏览 2提问于2021-03-01得票数 1
回答已采纳
ifThereIsAnError) // where `ifThereIsAnError` could be null不知何故，uniqueUsernameValidator正在静默由子表单域指定的required验证
浏览 11提问于2020-09-16得票数 4
3回答
我已经创建了一个带有动态输入的角度项目，我单击一个按钮然后创建新的输入，我想使用FormBuilder来获取数据，但我不知道如何做到这一点。
浏览 7提问于2022-02-24得票数 0
我收到了错误: TypeError:无法在string‘control’上创建属性‘验证器’“import { CommonModule } from '@angular/common';
import { BrowserModule } from'@angular/platf
浏览 5提问于2017-07-21得票数 3
回答已采纳
我在angular2中有一个数据驱动的表单，如下所示 'name': ['',Validators.required], 'places': this.formBuilder.array([], Validators.minlength(1)) 我想向place formArray添加验证，所以我添加了minlength验证</
浏览 0提问于2017-02-12得票数 39
2回答
我有几个表单数组，我需要一个验证，以便每个表单行中的特定字段在所有表单数组中必须是唯一的。如果其中任何一个值出现多次，则两个表单域都必须标记为红色。但是我不确定如何在实际的验证过程中使用它。waterPressureFormArr')) { } return duplicateFlag;对于每一次击键，都会调用此函数，并检查所有其他表单数组中的所有值但是，我如何更改它，以便可以将此函数用作<em
浏览 0提问于2019-10-27得票数 1
1回答
我有一个下面的演示应用程序，并试图设置自定义验证器中的错误，为什么它没有设置。import { Component, VERSION } from '@angular/core';
import { FormArray, FormBuilder, FormGroup ,AbstractControl,Validators} f
浏览 2提问于2020-06-18得票数 0
我在Liferay DXP中有一个angular portlet。我可以在view.jsp文件中获取Liferay当前用户的信息。如何从angular 2+应用(例如从app.component.ts )获取它？
浏览 0提问于2018-03-01得票数 0
我有一个控件的FormArray。这样做的主要用例是让用户粘贴到一个值列表中，应用程序将值拆分为换行符，然后在FormArray中根据需要创建任意多个输入，并将值分配给每个输入。我想做的是验证所有粘贴的值与主数据相比是否有效，只需调用数组中提供的值的数组到服务器即可。我可以做一些愚蠢的事情，比如将验证器注入父组件，然后在FormArray上使用setValidator，但这看起来确实很麻烦。当然还有更好的方法，对吧？例如，用户粘贴以下内容(想象一下从excel复制一列值
浏览 0提问于2021-07-01得票数 0
在这里，我想使FormArray的长度为零。nod_occupation: new FormControl(null), nod_tags: new FormArray
浏览 0提问于2019-06-16得票数 2
回答已采纳
3回答
这是
如果您在本例中按下"save“，您将只看到第一个输入触发验证并变为红色，而另一个则需要手动单击。我有一个带有两个控件的formGroup，一个是FormControl，另一个是FormArray。我将主formGroup传递给子组件，并将1 formGroup推到formArray中，这个formGroup有一个formControl。基本上，我在叶子上有两个FormControl。因此，我希望检查所有元素的有效性，不管它是否在子组件中。
浏览 5提问于2021-01-24得票数 1
回答已采纳
我是Angular5的新手。我需要把用户的详细信息从角度传递给nodejs。, FormControl, FormArray } from selector: 'app-root', successRedirect : '/',
failureRedirect : '/
浏览 0提问于2018-03-29得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
