正文

FormArray 字段的角度自定义验证（反应式表单）

 2023-03-25  73

关键词：

【中文标题】FormArray 字段的角度自定义验证（反应式表单）【英文标题】：Angular custom validation for FormArray fields (Reactive Form) 【发布时间】：2022-01-02 12:57:53 【问题描述】：

我是 Angular 新手，想了解如何为 FormArray 执行自定义字段验证？

FormArray 是动态的，您可以在其中推送或删除 FormGroup 项。 FormGroup 由 field1、field2、field3 组成。如果任一字段不为空，则应使用 validators.required 设置其他字段。如果所有字段为空或已填充，则该表单将有效。

谢谢。

下面是代码示例：

formA!: FormGroup;

initializeForm(): void 
    this.formA = this.fb.group(
      item1: this.fb.array([this.createItem1()]),
      item2: this.fb.array([this.createItem2()]),
    );
  

createItem1(): FormGroup 
   return this.fb.group(
       field1: null,
       field2: null,
       field3: null,
   );

【问题讨论】：

【参考方案1】：

试试这个。

createItem1(): FormGroup 
  const fg = this.fb.group(
      field1: null,
      field2: null,
      field3: null,
  );
   
  const validatorFn = (control: AbstractControl):  [key: string]: any  | null => 
    const obj = fg.getRawValue();
     
    if (obj.field1 || obj.field2 || obj.field3) 
      return Validators.required(control);
    
     
    return null;
  ;
   
  for (const control of Object.values(fg.controls)) 
    control.setValidators(validatorFn);
  

  return fg;

您还需要在按键时为所有控件执行updateValueAndValidity()。

【讨论】：

嗨，我在尝试此操作时在“fg.controls”遇到了以下问题。可以建议吗？类型 ' [key: string]: AbstractControl; ' 必须有一个返回 iterator.ts(2488) 的 '[Symbol.iterator]()' 方法修正了我的答案。请再次检查。您好，感谢您的帮助。我做了一些更改以适应我的用例，并添加了额外的条件以在不需要时清除验证器。总的来说，它最终会奏效。

formArray 中的可拖动 formGroups（反应式表单）

】formArray中的可拖动formGroups（反应式表单）【英文标题】：DraggableformGroupsinformArray(reactiveforms)【发布时间】：2019-10-0214:30:59【问题描述】：在角度拖放模块中，他们提供了moveItemInArray()函数的文档，通过使用这个我们只能拖动数... 查看详情

为啥使用自定义全局验证器在角度材料 6 的 mat-form 字段中未显示 mat-error

】为啥使用自定义全局验证器在角度材料6的mat-form字段中未显示mat-error【英文标题】：Whymat-errornotgetdisplayedinsidemat-formfieldinangularmaterial6withcustomglobalvalidators为什么使用自定义全局验证器在角度材料6的mat-form字段中未显示mat-error【... 查看详情

添加新元素时，角度更新现有 FormArray 元素的有效性

】添加新元素时，角度更新现有FormArray元素的有效性【英文标题】：AngularupdatesvalidityofexistingFormArrayelementswhennewelementisadded【发布时间】：2018-12-1118:28:03【问题描述】：我不想要这个。因为我正在异步验证FormArray的每个元素，所... 查看详情

数字输入的角度自定义指令需要访问父反应表单 - FormGroup 和 FormContols

】数字输入的角度自定义指令需要访问父反应表单-FormGroup和FormContols【英文标题】：Angularcustomdirectiveonnumberinputneedsaccesstoparentreactiveform-FormGroupandFormContols【发布时间】：2022-01-0314:47:01【问题描述】：我编写了一个Angular自定义指... 查看详情

Angular 反应式表单自定义控件异步验证

】Angular反应式表单自定义控件异步验证【英文标题】：Angularreactiveformcustomcontrolasyncvalidation【发布时间】：2020-04-0608:48:11【问题描述】：更新：异步验证问题已成功解决。但是初始验证状态还有另一个问题。查看最新答案。诀窍... 查看详情

如何使用角度验证自定义验证模式中的文本

】如何使用角度验证自定义验证模式中的文本【英文标题】：howtovalidatetextincustomvalidatepatternsusingangular【发布时间】：2019-03-3020:05:01【问题描述】：我想仅使用此模式~*\\|:"<>?/验证文本。下面是我的文本框<inputtype... 查看详情

如何根据先前的字段输入角度更改验证

】如何根据先前的字段输入角度更改验证【英文标题】：HowcanIchangethevalidationsbasedonpreviousfieldinputangular【发布时间】：2022-01-2202:49:45【问题描述】：我有两个角度反应形式的字段。我需要验证第二个字段并根据选择的第一个字段... 查看详情

来自自定义表的 Spring Security 身份验证

...功能，但我的要求有点不同。我有一张桌子：1.Employee（字段ename，epassword）我想从这个表中验证用户，但使用springsecurity。我知道Spri 查看详情

Angular 反应式表单自定义验证器。仅在选中复选框时启用验证

】Angular反应式表单自定义验证器。仅在选中复选框时启用验证【英文标题】：Angularreactiveformscustomvalidator.EnableValidationonlywhencheckboxchecked【发布时间】：2019-02-2110:27:50【问题描述】：我在验证仅标记的复选框时遇到问题。首先，... 查看详情

日期选择器的 Kendo 自定义验证

...从下拉列表中选择日期时才有效。如果在datepicker的输入字段中键入日期，则最小查看详情

以角度形式为文件上传设置自定义验证未按预期工作

】以角度形式为文件上传设置自定义验证未按预期工作【英文标题】：SetCustomValidationforFileUploadinangularFormisnotworkingasexpected【发布时间】：2022-01-2020:56:51【问题描述】：我想实现上传pdf文件验证。如果上传的pdf文件受密码保护，... 查看详情

嵌套的自定义 FormArray 组件不与具有 FormArrayName 的子表单绑定

】嵌套的自定义FormArray组件不与具有FormArrayName的子表单绑定【英文标题】：nestedcustomFormArraycomponentdoesn\'tbindwithchildformwithFormArrayName【发布时间】：2019-08-2915:51:39【问题描述】：我尝试使用CVA创建2个嵌套表单。问题是当我将第二... 查看详情

角度材料 - mat-error 不显示输入字段的错误消息

...】：2019-05-1100:42:36【问题描述】：场景-带有表单数组的反应式表单。表单中的每个字段都有一个Required验证。表单数组本身具有minlength(1)和maxlength(3)的验证。在表单数组中添加4 查看详情

如何从 FormArray 中查找包含角度错误的表单索引？

】如何从FormArray中查找包含角度错误的表单索引？【英文标题】：HowtofindindexofformfromFormArraythatcontainerrorinangular?【发布时间】：2021-11-1320:43:05【问题描述】：我正在处理一种复杂的角度形式，我需要一些帮助。让我详细解释一下... 查看详情

以角度6动态加载formarray中的多个下拉列表

】以角度6动态加载formarray中的多个下拉列表【英文标题】：Dynamicallyloadmultipledropdowninformarrayinangular6【发布时间】：2019-01-2723:50:36【问题描述】：我想加载两个下拉列表，一个下拉列表基于另一个下拉列表。我正在使用formarray来... 查看详情

WooCommerce 结帐自定义字段条件验证

】WooCommerce结帐自定义字段条件验证【英文标题】：WooCommercecheckoutcustomfieldconditionalvalidation【发布时间】：2021-07-0205:12:33【问题描述】：我想将我的自定义字段保存到新的用户元数据中。我的自定义字段=T.C.金利克没有代码行开... 查看详情

反应形式自定义验证器未在 angular6 中显示错误

】反应形式自定义验证器未在angular6中显示错误【英文标题】：reactiveformcustomvalidatorsnotdisplayingtheerrorinangular6【发布时间】：2018-12-2903:41:19【问题描述】：在这个演示中，我为自定义验证器创建了一个示例表单，在这里，我有Fromd... 查看详情

如何以角度在 FormArray 中设置值？

】如何以角度在FormArray中设置值？【英文标题】：HowtosetvaluesinaFormArrayinangular?【发布时间】：2022-01-0422:43:10【问题描述】：我正在尝试在内部有一个FormArray的FormGroup中输入值，但我遇到了这个数组的问题，因为数据没有被映射我... 查看详情