关键词：
【中文标题】Angular 5 动态表单中的自定义验证器【英文标题】：Custom validator in Angular 5 dynamic forms 【发布时间】：2018-05-28 10:54:18 【问题描述】：我正在从 Angular 5 中的可配置 json 创建一个动态表单。一切正常，但我无法为特定字段添加自定义验证器。我收到类似
的错误TypeError: v is not a function
Json
"key": "age",
"label": "Age",
"required": false,
"order": 4,
"controlType": "textbox",
"validations": ['required', 'minlength'],
"custom":['rangeValidator'],//custom validator function name
"type": "email"
制作动态表单控件的组件：
toFormGroup(questions)
let group: any = ;
questions.forEach(question =>
group[question.key] = new FormControl(question.value || '', this.getValidators(question)
);
);
return new FormGroup(group);
getValidators(question)
let vals = [];
question.validations.forEach((v) =>
if (v == 'required')
vals.push(Validators.required);
if (v == 'minlength')
vals.push(Validators.minLength(4))
);
if (question.custom || question.custom.length > 0)
question.custom.forEach((va) =>
vals.push(va);
);
return vals;
主组件文件：
import Component, OnInit, Input from '@angular/core';
import FormGroup, AbstractControl ,FormControl from '@angular/forms';
function rangeValidator(c: FormControl)
if (c.value !== undefined && (isNaN(c.value) || c.value > 1 || c.value < 10))
return range: true ;
return null;
@Component(
selector: 'app-question',
templateUrl: './dynamic-form-question.component.html',
styleUrls: ['./dynamic-form-question.component.css']
)
export class DynamicFormQuestionComponent implements OnInit
@Input() question;
@Input() form: FormGroup;
get isValid() return this.form.controls[this.question.key].valid;
constructor()
ngOnInit()
console.log("My form", this.form.value)
Stackblitz Url
任何想法，请帮助
【问题讨论】：
【参考方案1】：那里
if (question.custom || question.custom.length > 0)
question.custom.forEach((va) =>
vals.push(va);
);
您想添加自定义验证器，但实际上您只需将字符串“rangeValidator”添加到验证器数组中。所以是的 v 不是一个函数:)
您应该像这样将范围验证器声明为海关验证器的静态函数：
export class CustomValidators
static rangeValidator(c: FormControl)
if (c.value !== undefined && (isNaN(c.value) || c.value > 1 || c.value < 10))
return range: true ;
return null;
然后将其导入并像这样使用它：
getValidators(question)
....
if (question.custom || question.custom.length > 0)
question.custom.forEach((va) =>
vals.push(CustomValidators[va]);
);
return vals;
见forked stackblitz
注意：这个分叉只解决当前问题。你的全局示例表单验证仍然不起作用
【讨论】：
非常感谢。它奏效了。知道为什么其他验证不起作用吗？ 你的范围验证搞砸了：c.value > 1 || c.value 是的，弄错了。非常感谢您的支持验证不会传播到 Angular 中的自定义表单控件 ng-select
】验证不会传播到Angular中的自定义表单控件ng-select【英文标题】：ValidationisnotpropagatetoCustomFormControlng-selectinAngular【发布时间】：2020-06-1223:43:55【问题描述】：我在Angular9应用程序中使用带有自定义表单控件的反应式表单。我用... 查看详情
Angular4 中的自定义验证
】Angular4中的自定义验证【英文标题】：CustomvalidationinAngular4【发布时间】：2018-07-2918:52:21【问题描述】：在我的页面中，我有一个简单的表单组。我必须在其中为名称编写自定义验证。this.searchForm=this._formBuilder.group(profileName:newF... 查看详情
将预定义的验证器添加到 Angular 中的自定义组件
】将预定义的验证器添加到Angular中的自定义组件【英文标题】：AddpredefinedvalidatortoacustomcomponentinAngular【发布时间】：2017-10-1008:22:02【问题描述】：我正在开发一个自定义组件，用于Angular中的表单。我正在实现ControlValueAccessor接... 查看详情
如何根据 Angular 2 中的自定义验证规则显示错误消息？
...表单，并且我已经成功创建了可以在模板中使用的自定义验证器。但是，我找不到显示绑定到特定错误的特定错误消息的方法。我想区分为什么表格 查看详情
使用自定义验证和动态值的 Angular 表单
】使用自定义验证和动态值的Angular表单【英文标题】：Angularformsusingcustomvalidationandadynamicvalue【发布时间】：2021-04-2501:21:21【问题描述】：我正在尝试创建一个自定义的反应式表单验证，它允许我传递一个数据数组来检查一个字... 查看详情
模板中的自定义表单验证错误
】模板中的自定义表单验证错误【英文标题】：customformvalidationerrorsintemplate【发布时间】：2020-07-2513:40:12【问题描述】：如何在模板中传递自定义表单验证错误？forms.pydefclean_username(self):inputusername=self.cleaned_data[\'username\']iflen(inpu... 查看详情
Angular 2中元素的自定义验证
】Angular2中元素的自定义验证【英文标题】：CustomValidatononanElementinAngular2【发布时间】：2017-12-3018:19:23【问题描述】：我有一个输入元素<inputtype="text"name="password">，它不在任何表单内。如何实现任何自定... 查看详情
如何使用 Angular 重置自定义表单控件
】如何使用Angular重置自定义表单控件【英文标题】：HowcanIresetacustomformcontrolwithAngular【发布时间】：2018-11-0921:54:04【问题描述】：我有一个带有验证的自定义表单控件。我在其中使用了一个独立的FormControl来处理值和一些验证。... 查看详情
Angular2 - 使用旧数据的自定义验证器
】Angular2-使用旧数据的自定义验证器【英文标题】：Angular2-Customvalidatorusingolddata【发布时间】：2017-06-2823:18:28【问题描述】：我编写的自定义验证器有问题。验证器用于验证组件中的所有数据。设置如下：组件显示一个包含X行... 查看详情
如何使用 Angular 6 中的自定义指令来呈现动态生成的内联 SVG
】如何使用Angular6中的自定义指令来呈现动态生成的内联SVG【英文标题】：HowtorenderdynamicallygeneratedinlineSVGbyusingcustomdirectiveinangular6【发布时间】：2018-12-1504:30:19【问题描述】：在我的应用程序中呈现动态生成的内联SVG时遇到困难... 查看详情
Angular 2 / Material - 应用到父 FormGroup 的自定义验证器未显示 md 错误
】Angular2/Material-应用到父FormGroup的自定义验证器未显示md错误【英文标题】：Angular2/Material-md-errornotdisplayedwithcustomvalidatorappliedtoparentFormGroup【发布时间】：2018-03-0200:01:12【问题描述】：我在使用Angular(v4.3.6)在模型驱动表单上显示... 查看详情
Angular 6. 如何在创建的自定义控件中赋予验证状态这个控件？
】Angular6.如何在创建的自定义控件中赋予验证状态这个控件？【英文标题】：Angular6.HowinthecreatedCustomControltogivenValidatorstatethiscontol?【发布时间】：2018-12-2509:51:48【问题描述】：我为表单创建了一个自定义控件。我的控件是这样的... 查看详情
Laravel 5 中的自定义验证器
】Laravel5中的自定义验证器【英文标题】：CustomvalidatorinLaravel5【发布时间】：2015-04-0916:14:51【问题描述】：我正在将我的Laravel应用程序从4升级到5。但是，我有一个无法使用的自定义验证器。在L4中，我创建了一个validators.php文... 查看详情
Joomla 2.5 中的验证码自定义表单
】Joomla2.5中的验证码自定义表单【英文标题】：CaptchaCustomForminJoomla2.5【发布时间】：2017-10-0619:05:48【问题描述】：经过数小时的尝试和搜索以解决验证码问题以及多次尝试解决问题失败后，我决定寻求您的帮助，我在Joomla2.5上... 查看详情
CORS Preflight 请求 - 标头中的自定义身份验证令牌 - Spring 和 Angular 4
】CORSPreflight请求-标头中的自定义身份验证令牌-Spring和Angular4【英文标题】：CORSPreflightrequest-Customauthtokeninheader-SpringandAngular4【发布时间】：2018-04-2323:07:42【问题描述】：我在本地服务器上使用令牌作为标头请求简单GET时遇到问... 查看详情
表单元素上的自定义引导验证
】表单元素上的自定义引导验证【英文标题】：CustomBootstrapvalidationonformelement【发布时间】：2020-07-2417:24:17【问题描述】：我正在注册表中收集ABN（澳大利亚商业号码）。我在这里编写了一些基于ABN验证规则进行验证的javascript：... 查看详情
ngverify-更高效的angular表单验证
ngVerifyv1.5.0aeasyAngularFormValidationplugin.简洁高效的__angular表单验证插件__Seehowpowerfulit.看看它有多强大动态校验自动关联提交按钮多种tip校验消息提示不只校验dom元素值，还可以校验ngModel数据模型支持任意类型表单元素，甚至可以... 查看详情
angular 2+ 中的自定义输入类型
】angular2+中的自定义输入类型【英文标题】：Custominputtypesinangular2+【发布时间】：2018-06-1123:07:33【问题描述】：我想为我的Angular2项目使用自定义输入类型（即）<inputtype=\'dob\'>创建自定义验证。我在堆栈溢出中看到了... 查看详情