我正在尝试创建一个非常通用\动态的反应表单,它可以为表单组使用自定义验证函数(比较 2 个日期)。该函数实际上可以是任何类型为 ValidatorFn 的验证函数:
export interface ValidatorFn {
(control: AbstractControl): ValidationErrors | null;
}
这是根本问题:
我在一种配置文件中定义函数,并用它初始化反应表单(接收函数作为参数)并使用validationFn设置formGroup。这是功能:
customValidationFunction : ValidatorFn = (group : FormGroup) : ValidationErrors | null =>
{
return (/*control : AbstractControl*/)/*:{[key: string] : any} | null*/ =>
{
if (group.controls["CreatedDateFormatFrom"] && group.controls["CreatedDateFormatTo"])
{
let from : AbstractControl = group.get("CreatedDateFormatFrom");
let to : AbstractControl = group.get("CreatedDateFormatTo");
const inValid = from && to && to.value < from.value;
return inValid ? {'invalidDates' : true } : null;
}
return null;
}
}
现在,在“customize\generic\dynamically created”响应式表单启动中,我设置了函数(或一些函数):
initForm(formGroupCustomValidation? : ValidatorFn[] )
{
let group: any = {};
//Here I initiate the group with FormControls, for example:
group[<fieldName>] = new FormControl(<some value> || '');
//This is where the custom validation function comes:
if (formGroupCustomValidation)
{
this.form = new FormGroup(group, {validators:
formGroupCustomValidation });
}
this.form.valueChanges.subscribe(values => {
console.log(values);
this.formValid();
})
}
对于“模糊”的代码,我很抱歉,但这是由于动态创建的表单。问题是如何使用 group:FormGroup 参数传递和执行函数?我倾向于认为我的函数定义\范围等有一些问题。在尝试调试函数时,我看不到函数体被触发。请支持。