如何在 FormControl Angular 上设置自定义验证器

Question

如何设置自定义验证角度，因为我正在定义控件

FormControl.setValidators(this.validateCall);
validateCall(): ValidatorFn {
return (control: FormControl): ValidationErrors | null => { // not getting control value here
const val = control.value;
if(val == null || val == undefined) {
return {
atLeastOneRequired: {
valid: false
}
}
}
return null;
}

Answer 1

您的自定义验证程序似乎不正确。您应该删除

return (control: FormControl): ValidationErrors | null => { 

也不需要错误中的嵌套对象。因此，请将您的验证器修改为：

validateCall(ctrl: AbstractControl): ValidationErrors | null {
const val = ctrl.value;
if (!val || val === '') {
return {
atLeastOneRequired: true
}
}
return null;
}

您将验证器设置为表单控件的方式是正确的，因为根据您的评论，我在这里这样做是为了达成共识，实际上我在 formControl 上使用它而不是在类上。在某些情况下，您可能还需要在设置自定义验证程序后手动调用窗体控件上的updateValueAndValidity。

斯塔克闪电战

Answer 2

反应式表单验证。 表单验证

this.heroForm = new FormGroup({
'name': new FormControl(this.hero.name, [
Validators.required,
Validators.minLength(4),
forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
]),
'alterEgo': new FormControl(this.hero.alterEgo),
'power': new FormControl(this.hero.power, Validators.required)
});