2017-06-19 33 views
0

我建设我FormGroup以下方式:角2+ ReactiveForm自定义验证函数不触发

this.datesGroup = this.fb.group({ 
 
    arrivalDate: [null, Validators.required], 
 
    departureDate: [null, Validators.required] 
 
}, (fg: FormGroup) => { 
 
    console.log('validate'); 
 
    return moment.unix(fg.value.departureDate.epoc).diff(moment.unix(fg.value.arrivalDate.epoc)) > 0 ? 
 
    null : { 
 
     'departureBeforeArrival': true 
 
    }; 
 
}); 
 
this.formGroup = this.fb.group({ 
 
    dates: this.datesGroup, 
 
    accommodation: ['', Validators.required] 
 
});

但验证箭头功能上面永远不会触发;控制台从不记录。我究竟做错了什么?

回答

1

FormBuilder.group方法需要两个参数:

group(controlsConfig: { 
     [key: string]: any; 
    }, extra?: { 
     [key: string]: any; 
    } | null): FormGroup; 

其中extra可以object财产validator和/或asyncValidator

,所以我将你的代码改成这样:

this.datesGroup = this.fb.group({ 
    arrivalDate: [null, Validators.required], 
    departureDate: [null, Validators.required] 
}, { 
    validator: (fg: FormGroup) => { 
    console.log('validate'); 
    return 1 > 0 ? 
     null : { 
     'departureBeforeArrival': true 
     }; 
    } 
}); 

活生生的例子可以在这里https://plnkr.co/edit/BcExweMVcVxy1yKhwmJp?p=preview

+0

+1找到:)。我认为[** docs **](https://angular.io/api/forms/FormBuilder#overview)可以更好地解释“extra”的含义,就像它为FormControl和FormArray所做的一样。 (我知道它在'FormGroup'中有很好的解释,但它也应该在FormBuilder中)。 – developer033