我正在尝试创建一个非常通用的\动态反应形式,该形式可以为表单组使用自定义验证功能(比较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;
}
}
现在,在“自定义\通用\动态创建”反应形式的初始化中,我设置了函数(或某些函数):
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参数传递和执行功能? 我倾向于认为函数定义\ scope等存在一些问题。 尝试调试功能时,看不到触发的功能主体。 请支持。
答案 0 :(得分:1)
您不必返回另一个函数,因为您没有传递额外的参数,就足够了:
customValidationFunction: ValidatorFn = (group: FormGroup) => {
const from: AbstractControl = group.get('CreatedDateFormatFrom');
const to: AbstractControl = group.get('CreatedDateFormatTo');
if (from && to) {
const inValid = from && to && to.value < from.value;
return inValid ? {'invalidDates': true} : null;
}
return null;
}
编辑1:
好吧,我有点遗漏了一点,因为您想将第一组传递给第二组,并对第一组的控件进行验证。
应该可以:
const group = new FormGroup({
CreatedDateFormatFrom: new FormControl(),
CreatedDateFormatTo: new FormControl()
});
const group2 = new FormGroup({anotherGroup: group}, this.customValidationFunction(group));
group.controls.CreatedDateFormatFrom.setValue('11-12-2018');
group.controls.CreatedDateFormatTo.setValue('11-11-2018');
customValidationFunction: ValidatorFn = (group: FormGroup) => {
return () => {
const from: AbstractControl = group.get('CreatedDateFormatFrom');
const to: AbstractControl = group.get('CreatedDateFormatTo');
if (from && to) {
const inValid = from && to && to.value < from.value;
return inValid ? {'invalidDates': true} : null;
}
return null;
};
}
答案 1 :(得分:0)
好吧,就像@Buczkowski提到的那样,我找到了一个解决方案。这是我的更正代码(特意注释掉的左侧代码-显示差异):
customValidationFunction: ValidatorFn /*: 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 : boolean = from && to && from.value && to.value && to.value < from.value;
return inValid ? {'invalidDates' : true } : null;
}
return null;
/*}*/
}