正文 

当前位置： 首页 > 源码 >

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

     2023-05-07     199

关键词：

【中文标题】Angular 反应式表单自定义验证器。仅在选中复选框时启用验证【英文标题】：Angular reactive forms custom validator. Enable Validation only when checkbox checked 【发布时间】：2019-02-21 10:27:50 【问题描述】：

我在验证仅标记的复选框时遇到问题。首先，当组件初始化并且所有复选框都被禁用时，如果他们单击保存按钮，它应该输出一个验证，表明您没有单击任何复选框。第二次验证是当您标记了一个复选框但您没有输入任何数量时，它应该只标记“此字段是必需的”。但是，现在，当我单击保存按钮时，即使禁用了所有数量，也会出现错误“此字段为必填项”。我该如何解决这个问题？还请我评论的功能，也许这会有所帮助。谢谢。

请点击这里查看我的 stackblitz 链接：CODE LINK

patchValues() 
    let rows = this.myForm.get('rows') as FormArray;
    this.orders.forEach(material => 
      material.materials.forEach(x => 
        rows.push(this.fb.group(
          checkbox_value: [null],
          material_id: new FormControl( value: x.id, disabled: true , Validators.required),
          material_name: x.name,
          quantity: [null]
        ));
        // this.formArrayLength++;
      );
    );

【问题讨论】：

【参考方案1】：

您需要为您的表单和数组中的子表单创建custom validators。

当其中一个复选框被选中时，表单有效。而且看起来像

formValidator(control: AbstractControl):  [key: string]: any  
   return control.value.rows.some(i => i.checkbox_value) ? null :  'checkboxReq': 'Some checkbox field is required'

将其添加到您的表单中

this.myForm.setValidators([this.formValidator.bind(this)])

在模板中你可以通过myForm.getError('checkboxReq')得到它

<small class="form-text text-muted danger">myForm.getError('checkboxReq')</small>

对于子表单需要另一个验证器

subFormValidator(control: AbstractControl):  [key: string]: any  
   return control.value.checkbox_value ?  'req': 'This field is required'  : null

在初始化子表单时添加它

(this.fb.group(
      checkbox_value: [null],
      material_id: [ value: x.id, disabled: true ],
      material_name: x.name,
      quantity: [null]
    , [this.subFormValidator.bind(this)]));

模板

<small class="form-text text-muted danger" *ngIf="row.invalid && row.touched">This field is required</small>

stackblitz example with changes

【讨论】：

您好，谢谢您。我的 patchValues 函数有问题。你能不能改变我的补丁值，因为在我自己的应用程序上它说 this.data.reduce 不是一个函数。你能回到我的 patchValues 的样子吗？谢谢 reduce 是我使用的默认数组方法 (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…)，因为我想要扁平内部数组。如果你没有内部数组，只需删除 reduce。使用 reduce 和 map 比使用 forEach 和 push 更好。 而且我已经实现了我的自定义验证器，它说数量不应超过可用数量，我不知道如何将它与您的自定义验证器结合起来。你能帮忙吗。检查这个stackblitz.com/edit/… 在数组中添加了验证器。只需在我的[this.formValidator.bind(this), this.anotherFormValidator.bind(this)] 之后添加您的验证器 您好，收到了吗？

使用自定义验证和动态值的 Angular 表单

...1-04-2501:21:21【问题描述】：我正在尝试创建一个自定义的反应式表单验证，它允许我传递一个数据数组来检查一个字符串是否已经存在。我能够以一种方式做到这一点，因此这将是一个表单级别的验证，但我无法让它在单个表单... 查看详情

验证不会传播到 Angular 中的自定义表单控件 ng-select

...述】：我在Angular9应用程序中使用带有自定义表单控件的反应式表单。我用自定义表单控件包装了我的ng-select控件。我的验证有问题。我将formControl设置为必需。D 查看详情

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

】FormArray字段的角度自定义验证（反应式表单）【英文标题】：AngularcustomvalidationforFormArrayfields(ReactiveForm)【发布时间】：2022-01-0212:57:53【问题描述】：我是Angular新手，想了解如何为FormArray执行自定义字段验证？FormArray是动态的... 查看详情

Angular 反应复选框仅在第一次单击后正确切换

】Angular反应复选框仅在第一次单击后正确切换【英文标题】：Angularreactivecheckboxesonlytogglecorrectlyafterfirstclick【发布时间】：2017-12-2209:35:54【问题描述】：我有一个由复选框动态生成的表单，以及一个从服务器获取表单数据的初始... 查看详情

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

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

angular5+自定义表单验证器

Angular5+自定义表单验证器CustomValidators标签（空格分隔）：Angular首先阐述一下遇到的问题：怎样实现“再次输入密码”的验证（两个controller值相等）（equalTo）怎样反向监听（先输入“再次输入密码”，后输入设置密码）解决思... 查看详情

Angular 2 - 自定义表单控件 - 禁用

...中使用它时，一切正常。但是当我使用模型驱动的方法（反应式表单）时，表单控件上的disable()方法似乎 查看详情

angular自定义验证器添加入模板驱动表单

创建自定义验证器的命令nggeneratedirectiveforbidden-name(自定义床啊金验证器的名称)生成的文件内容import{Directive}from'@angular/core';@Directive({selector:'[appForbiddenName]'})exportclassForbiddenNameDirective{const 查看详情

使用反应式表单在 Angular 中检查后，表达式发生了变化

】使用反应式表单在Angular中检查后，表达式发生了变化【英文标题】：ExpressionhaschangedafteritwascheckedinAngularusingReactiveForms【发布时间】：2019-08-0421:41:12【问题描述】：我正在使用Angular6做一个Web应用程序，并且我正在使用ReactiveFor... 查看详情

Angular 5 动态表单中的自定义验证器

】Angular5动态表单中的自定义验证器【英文标题】：CustomvalidatorinAngular5dynamicforms【发布时间】：2018-05-2810:54:18【问题描述】：我正在从Angular5中的可配置json创建一个动态表单。一切正常，但我无法为特定字段添加自定义验证器。... 查看详情

Angular 11 自定义 ISBN 验证器响应式表单

】Angular11自定义ISBN验证器响应式表单【英文标题】：Angular11CustomISBNValidatorReactiveForms【发布时间】：2022-01-2322:09:59【问题描述】：我正在对ISBN号码进行自定义验证，我已经拥有检查号码并完美运行的功能，可以通过控制台为我... 查看详情

Angular - 模板驱动的表单 - 控制器中的自定义验证器功能

】Angular-模板驱动的表单-控制器中的自定义验证器功能【英文标题】：Angular-Templatedrivenforms-customvalidatorfunctioninthecontroller【发布时间】：2019-03-2306:30:29【问题描述】：由于在ngModel中使用响应式表单是deprecatedinAngular6，并且我的项... 查看详情

如何使用 Angular 重置自定义表单控件

】如何使用Angular重置自定义表单控件【英文标题】：HowcanIresetacustomformcontrolwithAngular【发布时间】：2018-11-0921:54:04【问题描述】：我有一个带有验证的自定义表单控件。我在其中使用了一个独立的FormControl来处理值和一些验证。... 查看详情

如何仅在输入模糊时触发反应表单 valueChanges 订阅并在 Angular 2 中输入键

】如何仅在输入模糊时触发反应表单valueChanges订阅并在Angular2中输入键【英文标题】：HowtotriggerreactiveformvalueChangessubscriptiononlyoninputblurandenterkeyinAngular2【发布时间】：2018-03-2116:47:39【问题描述】：我正在开发一个表单，该表单应... 查看详情

angular6自定义验证不允许空格作为第一个字符？(代码片段)

我使用的是反应式文本框，我需要很少的自定义验证。输入框不能包含以空格开头的字符。我正在使用所需的验证器使其成为必需的，但如果我输入一个空格，它仍然认为它有效（我不想要）。我怎样才能解决这个问题呢？答案... 查看详情

Angular 反应式表单复选框验证

】Angular反应式表单复选框验证【英文标题】：Angularreactiveformscheckboxvalidations【发布时间】：2022-01-1105:45:06【问题描述】：我正在尝试对我的复选框进行必要的验证。我的TS文件：publiccolors:Array<any>=[description:\'White\',value:\'White... 查看详情

验证模板表单中的复选框列表（不是反应式表单）Angular 2

】验证模板表单中的复选框列表（不是反应式表单）Angular2【英文标题】：ValidationofCheckboxlistinTemplateform(notReactiveforms)Angular2【发布时间】：2018-01-2320:25:15【问题描述】：如何验证是否从Angular2模板表单中的复选框列表中选择了至... 查看详情

Angular 4 - 验证器自定义函数这是未定义的

】Angular4-验证器自定义函数这是未定义的【英文标题】：Angular4-validatorcustomfunctionthisisundefined【发布时间】：2018-07-2422:02:34【问题描述】：我正在构建一个应用程序与组件FormComponent。在里面我正在使用来自角核心的反应形式模块... 查看详情