- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在表单中添加自定义验证器,以防止 mat-step 切换到下一步。当我使用 FormGroups 时一切正常,但当我必须使用 FormArray 时无法实现验证。
我已经尝试了至少两种在表单初始化时分配验证器的变体:
状态:this._formBuilder.array([this.createStatus()], defaultStatusValidator())
this.productionLineStatuses = this._formBuilder.group({statuses: this._formBuilder.array([this.createStatus()])},
{验证器:defaultStatusValidator()});
但是这种尝试会导致错误(可能是在强制转换验证器时):
TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
at FormGroup.validate [as validator] (default-status.directive.ts:6)
at FormGroup._runValidator (forms.js:3438)
at FormGroup.updateValueAndValidity (forms.js:3399)
at new FormGroup (forms.js:4097)
at FormBuilder.group (forms.js:7578)
at CreateProductionLineComponent.ngOnInit (create-production-line.component.ts:31)
在以下情况下不会抛出错误,但验证器也无法正常工作。这是我的其余代码和我的自定义验证器:
ngOnInit() {
this.productionLineDetails = this._formBuilder.group({
productType: ['', Validators.required],
language: ['', Validators.required],
name: ['', Validators.required],
description: [''],
});
this.productionLineStatuses = this._formBuilder.group({
statuses: this._formBuilder.array([
this.createStatus()
])
}, defaultStatusValidator());
this.statuses = this.productionLineStatuses.get('statuses') as FormArray;
this.statusError = false;
}
验证者:
export function defaultStatusValidator(): ValidatorFn {
return function validate (statuses: FormArray) {
let defaultCounter = 0;
Object.keys(statuses.value.controls).forEach(key => {
const control = statuses.value.controls[key];
if (control.value.default == true) {
defaultCounter ++;
}
});
return (defaultCounter > 1) ? {moreThanOneStatusIsDefault: true} : null;
};
}
我应该如何正确地将验证器添加到 FormArray?
最佳答案
您已经考虑过您的 FormArray 是 FormControls 的 FormArray 还是 FormGroups 的 FormArray,但问题在于您如何迭代控件,
两者的简单示例
export function customValidateArray(): ValidatorFn {
return (formArray:FormArray):{[key: string]: any} | null=>{
let valid:boolean=true;
formArray.controls.forEach((x:FormControl)=>{
valid=valid && x.value=="a"
})
return valid?null:{error:'Not all a'}
}
};
export function customValidateArrayGroup(): ValidatorFn {
return (formArray:FormArray):{[key: string]: any} | null=>{
let valid:boolean=true;
formArray.controls.forEach((x:FormGroup)=>{
valid=valid && x.value.name=="a"
})
return valid?null:{error:'Not all name are a'}
}
};
您可以在 stackblitz 中查看示例
注意:创建表单时,我使用了FormGroup、FormControl和FormArray的构造函数,但你也可以使用FormBuilder。
注意 2:不必将 FormArray 包含在 FormGroup 中
关于angular - 如何将自定义验证器添加到 FormArray?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57794118/
这是我想要完成的: 在一个页面中,用户将能够上传他们对某些外汇对的保护。因此,用户可以选择不同的时间范围来上传他们的图像分析。我的表格很简单: dataForm: FormGroup; this.da
我不知道如何重置 FormArray 的单个字段,例如: myForm = this.fb.group( { title: ["", [Validators.r
我正在尝试在 formarray 中实现 formarray 但它不起作用,下面也尝试过但不起作用。 How to get FormArrayName when the FormArray is ne
我用 ControlValueAccessor 构建了一个自定义输入组件,它非常适合添加标签作为选择。 ( Stackblitz ) 我的问题是: 当我在表单中实现组件时(城市和州控件) 通过选择一些
我认为这可能是响应式(Reactive)表单的一个错误。如果有经验丰富的 Angular 专家提供帮助,我将不胜感激。 症状:无法在给定时间输入超过 1 个字符。 出现情况:当输入是 FormArra
如何解决下面提到的错误: Type 'FormArray' is not assignable to type 'any[]'. Property 'includes' is missing in t
我有一个表单,其中一个控件是 formGroups 的 formArray。我将自定义验证器设置为 formGroups 中的一些控件。验证器工作正常,如果我在某些控件无效时检查 formArray
我想在表单中添加自定义验证器,以防止 mat-step 切换到下一步。当我使用 FormGroups 时一切正常,但当我必须使用 FormArray 时无法实现验证。 我已经尝试了至少两种在表单初始化
我想要多条错误消息,但不知道该怎么做......?在这里,我需要分别验证每个步骤,这就是我使用此步进器的原因 Em
我已经实现了一个 stackblitz,您可以在其中使用一些配置创建一个动态表单。一切正常,直到您使用 FormArray .什么想法?基本上,您的配置文件中可以有许多不同类型的字段。例如 check
我想用 FormArray 创建一个可编辑的表格。 为此,我有 results在表中呈现的属性。 用 FormArray 数据初始化它的正确方法是什么? results: Array; tableFo
我有一个动态大小的项目。对于每个我想生成一个复选框的项目。 我认为最好的方法是使用 FormArray。 但是我无法设置任何其他属性来指定动态复选框的标签。 items: Array = ['Bana
已关闭。此问题需要 debugging details 。目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and the
这是我的表单组: this.productGroup = this.fb.group({ name: ['', Validators.compose([Validators.required, V
我在 Angular 6 中使用了响应式(Reactive)形式。这种响应式(Reactive)形式包含一个名为 instruments 的 FormGroup,它是一个 FormArray。 我收到
我的 Angular 5/Angular Material 应用程序中有这个 FormArray: this.form = new FormGroup({ customerNumberC
我有一个 PhoneNumbersFormComponent 其模板如下所示: 我想通过 angular-cli 的 ng g component
我用 angular2 和 typescript 构建了一个表单。我尝试动态添加复选框列表,但它对我不起作用,我的错误在哪里? 模板代码:
我有在 FormBuilder 的帮助下构建的 Angular 表单。 Form 包含一个 FormArray,它具有用户想要的任意多的字段。我已经为字段设置了验证器 this.fb.array([t
我创建了一个自定义验证器来验证我的 FormArray 中的唯一性。当特定的值已经在数组中时,我想显示错误。 问题是它没有按预期工作。 实际行为: 重现步骤: 添加 3 个“输入”- 地址; 填写输入
我是一名优秀的程序员,十分优秀!